以 3 列格式浮动可变高度的 div 列表

Question

我有一个产品列表 div，其中包含另外两个 div，每个垂直显示在其中 - 顶部一个包含图像，底部一个包含文本。文本的大小是可变的，因此外部 divs 的大小也是可变的。这些外部 div 向左浮动并连续 3 行，直到出现带有长文本的 div，然后下一行紧接该列之后开始，留下空隙。

所以如果我有一行，其中第 2 个 div 有 3 行文本到其他两个 1，第 4 个 div 将不会从下一行的第一个位置开始，而是在第三个

这是一张图片，展示了我现在看到的与下一秒我想做的事情：

以及我的目标

Answer 1

您可以为 div 个元素创建一行，这将生成您需要的布局！我还提供了一个仅 CSS 的解决方案，其中 class clearfix 将执行与 row class!

相同的操作

CSS3:

.row{
  display:flex;
}
.box{
  background-color:grey;
  float:left;
  margin:3px;
  width:100px;
  height:100px;
}

<div class="row">
  <div class="box">1</div>
  <div class="box" style="height:200px;">2</div>
  <div class="box">3</div>
</div>
<div class="row">
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
</div>

CSS:

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

.box{
  background-color:grey;
  float:left;
  margin:3px;
  width:100px;
  height:100px;
}

<div class="clearfix">
  <div class="box">1</div>
  <div class="box" style="height:200px;">2</div>
  <div class="box">3</div>
</div>
<div class="clearfix">
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
</div>

Answer 2

不要使用浮动。看看这个 fiddle：

JSFiddle Demo

CSS:

.block {
  width: 33.33%;
  display: inline-block;
  vertical-align: top;
  margin-right: -3px;
}

.inner {
  min-height: 100px;
  margin-bottom: 10px;
  background: #000;
}

Answer 3

HTML

<div class="flex-container">
<div class="box">img</div>
<div class="box">img</div>
<div class="box">img</div>
</div>
<div class="flex-container">
<div class="box">txt</div>
<div class="box">txt</div>
<div class="box">txt</div>
</div>

CSS

.flex-container{
background:red;
display:flex;
width:100%;
height:auto;
margin:0% auto;
padding:1% 0;
}
.box{
min-width:100px;
height:auto;
padding:1%;
margin:0 1%;
flex-grow:1;
background:green;
}

另外，请检查您是否清除了所有浮动

请看Using CSS Flexible Boxes MDNweb docs

以 3 列格式浮动可变高度的 div 列表

floating a list of divs of variable height in 3 column format

css

css-float