使左浮动 div 打破容器内部（CSS 或 Javascript）

Question

我有一系列包含固定宽度框（蓝色）的 div。我希望这些容器 div 在主页容器（白色）内中断，如下图所示：尽管是浮动的，但我的代码不允许这些容器 div 彼此相邻浮动或破坏容器内部：

.container {
  width: 900px;
  border: 2px solid red;
}

.box_container {
width: auto;
float: left;
background: green;
padding: 10px;
}

.box {
width: 80px;
float: left;
height: 80px;
margin-right: 20px;
background: blue;
}

<div class="container">
<span class="box_container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</span>
<span class="box_container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</span>
<span class="box_container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</span>
</div>

如果纯 CSS 无法实现此布局，是否有其他方法可以实现此目的？

Answer 1

您可以使用如下所示的 inline/inline-block 元素的组合来近似此，但它更像是一种 hack 而不是可靠的解决方案：。顺便说一句，只有内联元素才可以换行。

.container {
  line-height: 120px; /* This */
}

.box_container {
  display: inline;
  background: green;
  border:5px solid yellow;
  margin:0 5px;
  padding: 40px 0;
  line-height:80px; /* add this are important for the hack */
  border-radius:10px;
}
.box_container:first-child {
  margin-left:0;
}

.box {
  width: 80px;
  display: inline-block;
  vertical-align: middle;
  height: 80px;
  margin: 10px;
  background: blue;
}

<div class="container">
  <div class="box_container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="box_container" style="background:red">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="box_container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

你可以考虑box-decoration-break: clone;^ref 会更接近你想要的:

.container {
  line-height: 120px; /* This */
}

.box_container {
  display: inline;
  background: green;
  border:5px solid yellow;
  margin:0 5px;
  padding: 40px 0;
  line-height:80px; /* add this are important for the hack */
  border-radius:10px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.box {
  width: 80px;
  display: inline-block;
  vertical-align: middle;
  height: 80px;
  margin: 10px;
  background: blue;
}

<div class="container">
  <div class="box_container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="box_container" style="background:red">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="box_container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

使左浮动 div 打破容器内部（CSS 或 Javascript）

Make left float div break inside container (CSS or Javascript)

html

css

css-float