当DIV1的高度略大于DIV2和DIV3的高度时，是否有办法将DIV4浮在同级的第一个DIV1下？

Question

I know it's difficult to understand the problem from the title, so I will explain it in real example. 我知道很难从标题中理解问题，因此我将以实际示例进行说明。

The server generates DIVs with contents and sends to the browser. 服务器生成带有内容的DIV，并将其发送到浏览器。
Each DIV has same class: eg. 每个DIV具有相同的类别： ' .column '. ' .column '。
All DIVs have "almost" same height. 所有DIV具有“几乎”相同的高度。 One can be slightly taller or shorter than the other. 一个可以比另一个高一些或短一些。

The goal is to force FLOAT:left all columns even if the first column above is taller than its siblings. 目标是强制FLOAT：即使上面的第一列比其兄弟姐妹高，也请保留所有列。 See the below screenshot. 请参见下面的屏幕截图。

屏幕截图

In the above image you can see that Col4 is NOT under Col1 because Col1's height is taller than its siblings'. 在上图中可以看到，COL4 不是 Col1中下因为Col1中的高度比它的兄弟姐妹更高。 Is there a way to force Col4 DIV be floated left under Col1 DIV? 有没有办法强迫Col4 DIV浮动到Col1 DIV下？

I'm looking for a native CSS solution if possible. 如果可能，我正在寻找本机CSS解决方案。 And I don't need simple solution like creating 3 columns and pushing DIVs into each one. 而且我也不需要像创建3列和推动的DIV到每一个简单的解决方案。

If it's really impossible, I would really appreciate if you could answer why Col6 is not "sticking" up to Col1 ? 如果这真的不可能，那么如果您能回答为什么Col6不“坚持”到Col1上 ，我将不胜感激。

The above can be obtained from: 可以从以下获得：

.col{
  float:left;
  height:50px;
  width:130px;
  border-left: 1px solid;
  border-bottom: 1px solid;
}

.col1{
  height:60px
}

And HTML: 和HTML：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div class="col col1">Col1</div>
  <div class="col">Col2</div>
  <div class="col">Col3</div>
  <div class="col">Col4</div>
  <div class="col">Col5</div>
  <div class="col">Col6</div>
</body>
</html>

Here is the live example in jsbin. 这是jsbin中的实时示例。

I would really appreciate any help. 我真的很感谢您的帮助。

Answer 1

You should simply be able to clear the floats: 您应该只能够清除浮点数：

.col:nth-child(4) {
  clear: left;
}

If you need to support older browsers, use this selector instead: 如果需要支持较旧的浏览器，请改用以下选择器：

.col1 + .col + .col + .col {
  clear: left;
}

If you need your 5th and 6th columns to be flush with the bottom borders of your 2nd and 3rd columns respectively, though, you can't achieve it with floats alone. 但是，如果您需要第5列和第6列分别与第2列和第3列的底部边框齐平，则仅靠浮点数就无法实现。 You'll need to find another way around it, or use something like jQuery Masonry to lay out your page. 您需要找到另一种解决方法，或者使用类似jQuery Masonry的页面布局。

The only possible reason why your 6th column isn't sticking up to your 1st column is because it's wrapping to a new line, and according to the float model a box cannot be higher than the bottom of its preceding floated boxes. 第6列不紧贴第1列的唯一可能原因是，它包装到了新行，并且根据浮动模型，一个框不能高于其先前浮动框的底部。

Answer 2

you may simply try to remove " float:left; " from you " col " class on your css and replace it with " display:inline-block; " and it may work. 您可以尝试从CSS的“ col ”类中删除“ float：left; ”，然后将其替换为“ display：inline-block; ”，它可能会起作用。 Not sure if it works on all browsers. 不知道它是否在所有浏览器上都有效。 Have only tried this on chrome and mozilla. 仅在chrome和mozilla上尝试过此方法。

 .col{
     /*float:left;*/
     height:50px;
     width:130px;
     border-left: 1px solid;
     border-bottom: 1px solid;

     display:inline-block; 
  }

live example at http://jsbin.com/ajikoq/11/edit http://jsbin.com/ajikoq/11/edit上的实时示例

当DIV1的高度略大于DIV2和DIV3的高度时，是否有办法将DIV4浮在同级的第一个DIV1下？

问题描述

2 个解决方案

解决方案1
4 已采纳 2012-10-05 04:37:21

解决方案2
1 2012-10-05 04:51:25

当DIV1的高度略大于DIV2和DIV3的高度时，是否有办法将DIV4浮在同级的第一个DIV1下？

问题描述

2 个解决方案

解决方案1 4 已采纳 2012-10-05 04:37:21

解决方案2 1 2012-10-05 04:51:25

解决方案1
4 已采纳 2012-10-05 04:37:21

解决方案2
1 2012-10-05 04:51:25