html - 将 div 调整为 div %

Question

我的问题是我正在尝试制作响应式模板。我现在正在制作标题。

首先，我将在此处发布一段代码，让您了解一下。

<div id="header_box">
  <div class="box">
  Content of box / Img
  </div>
  <div class="box">
  Content of box / Img
  </div>
  <div class="box">
  Content of box / Img
  </div>
</div>

“header_box”的宽度为 100%，“box”的宽度为 40%。

这意味着因为有 3 个“盒子”，它会变成 120%，有没有办法让“盒子”宽度自动调整大小，大约 30%，如果我添加另一个“盒子”，它会变成 20% ，或类似的东西？

谢谢。

Answer 1

首先你的 ID 应该是唯一的，所以在你给出的例子中你最好使用类来代替(即 class="box")

您可以在 CSS 中使用 flex 和 inline-flex 来根据屏幕宽度调整 DIV 的大小。我在这里附上了一个基本示例:http://jsfiddle.net/18e3cxd1/

.box {
    display:inline-flex;
    width:30%;
    border:solid 1px red;
}

此链接为使用 flexbox 提供了一些非常好的指导:https://css-tricks.com/snippets/css/a-guide-to-flexbox/