使左浮动 div 在容器内中断（CSS 或 Javascript）答案

【问题标题】：Make left float div break inside container (CSS or Javascript)使左浮动 div 在容器内中断（CSS 或 Javascript）
【发布时间】：2019-12-01 20:28:24
【问题描述】：

我有一系列包含固定宽度框（蓝色）的 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 无法实现这种布局，是否有其他方法可以实现这一目标？

【问题讨论】：

第二个块容器很大，只需要一行
是的，那么目标就是在主容器内打破第二个块。
您不能将一个元素一分为二。只有内联/文本可以在多行上换行
我不想把它分成两个元素，我想要一个元素包裹在一个固定的容器内。
我想要一个单独的元素包裹在里面 --> 这就是我所说的分成两个。您无法使用块级元素来实现这一点，只有内联元素可以换行。（float 是块级元素）

标签： html css css-float

【解决方案1】：

您可以使用下面的内联/内联块元素的组合来近似这一点，但它更像是一种 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>

【讨论】：