css - 将div添加到div(响应式布局)中

Closed. This question needs to be more focused。它当前不接受答案。












                            想改善这个问题吗？更新问题，使其仅通过editing this post专注于一个问题。

                        在10个月前关闭。



我正在仅使用CSS和React创建一个响应式网站。我想在一个主div中有很多div，但要保持其响应速度和3列布局。将来会自动添加其他小div。如何获得这样的结果？

我是一个初学者，正在考虑flexbox，但我不知道如何使用它来获得3列响应式布局。

不适用

最佳答案

如果您想使用纯CSS解决它，则可以使用flexboxes，但我建议您像Dupocas所建议的那样来看看bootstrap。它将帮助您进行布局和响应。

仍然，这是一个简短的示例，说明如何使用flexbox解决它：

.board {
  background-color: grey;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.item {
  background-color: lightgrey;
  width: 30%;
}

<div class="board">
  <div class="item">
    One
  </div>
  <div class="item">
    Two
  </div>
  <div class="item">
    Three
  </div>
  <div class="item">
    Four
  </div>
  <div class="item">
    Five
  </div>
  <div class="item">
    Six
  </div>
</div>

关于css - 将div添加到div(响应式布局)中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55404284/

上一篇：html - 如何修复此进度条上的分层？

下一篇：javascript - 如何在html中制作下拉菜单？

相关文章：

html - 如何对齐图像旁边的标题和段落

javascript - 输入类型复选框出现 : checkbox. 值，并且 setState 在首次单击时工作不正确

android - 将按钮从相对布局更改为线性布局奇怪的副作用

html - Internet Explorer 和 Firefox 对齐元素在站点上不同

r - 如何在 R 中的布局内调整单个绘图的边距？

html - 像素精度降低 2 个像素

javascript - 除了在其他浏览器上工作外，Range Slider 无法在 Internet Explore 上工作

css - 平滑的 css 选框

javascript - 正则表达式用于检查字符串是否不应包含某些单词，但如果这些单词前面有 'to' 或 'for' 则可以

javascript - Material UI 文本字段，当前光标位置