可变高度处的CSS浮动Div

Question

可变高度处的CSS浮动Div我有一个100 px宽度的无限个div，它可以容纳一个250 px宽度的父级。无论高度如何，我都需要在行中显示div，如图像所示。我试过解决这个问题，但是div的高度似乎把它搞砸了。我非常感谢你的帮助。谢谢：)        <style>             #holder{             width:250px;             border:1px dotted blue;             display:inline-block;         }         .box{             width:100px;             height:150px;             background-color:#CCC;             float:left;             text-align:center;             font-size:45px;             display:inline-block;         }         .one{             background-color:#0F0;             height:200px;         }         .two{             background-color:#0FF;         }         .three{             background-color:#00F;         }         .four{             background-color:#FF0;         }     </style>     <div id="holder">         <div class="box one">1</div>         <div class="box two">2</div>         <div class="box three">3</div>         <div class="box four">4</div>     </div>这是小提琴以下是我使用javascript所做的和取得的成就https://jsfiddle.net/8o0nwft9/

Answer 1

据我所知，无法用纯CSS(在所有常见浏览器中都有效)解决这个问题：

• 浮子

  不工作.

• display: inline-block 不起作用.

• position: relative

  带着

  position: absolute

  要求

  手动像素调谐

  ..如果您使用的是服务器端语言，并且正在处理图像(或具有可预测高度的东西)，则可以使用服务器端代码“自动”处理像素调优。

相反，使用jQuery砌体.

Answer 2

假设您的需求更像您的有色示例代码，那么：

.box:nth-child(odd){
    clear:both;}

如果是3行nth-child(3n+1)

Answer 3

从这个评论中得到一点帮助(CSS块左浮动我想出了答案。

在我所做的每一行中，我都添加了一个类名。left.
在我所做的每一个“行”上，我都添加了一个类名。right.

然后，我为每个类名向左浮动和向右浮动！

唯一复杂的是，我的内容顺序在“右”行上被颠倒了，但是可以使用PHP来解决。

谢谢你们的帮助！

#holder{

  width:200px;

  border:1px dotted blue;

  display:inline-block;

}

.box{

  width:100px;

  height:150px;

  background-color:#CCC;

  float:left;

  text-align:center;

  font-size:45px;

}

.one{

  background-color:#0F0;

  height:200px;

}

.two{

  background-color:#0FF;

}

.three{

  background-color:#00F;

  float:right;

}

.four{

  background-color:#FF0;

  float:right;

}

.left{float:left;}

.right{float:right;}

<div id="holder">

  <div class="box one left">1</div>

  <div class="box two left">2</div>

  <div class="box four right">4</div>

  <div class="box three right">3</div>

</div>

</body>