Question

我知道很难从标题中理解问题，所以我将在实例中解释它。

服务器生成带有内容的DIV并发送到浏览器。
每个DIV都有相同的类：例如。 '.column'。
所有DIV都有“几乎”相同的高度。一个可以比另一个略高或短。

目标是强制 FLOAT：left 所有列，即使上面的第一列高于其兄弟。请参见下面的屏幕截图。

screenshot

在上图中，您可以看到 Col4 在 Col1 下，因为Col1的高度高于其兄弟姐妹'。 有没有办法强制Col4 DIV在Col1 DIV下面浮动？

如果可能的话，我正在寻找原生的CSS解决方案。我不需要简单的解决方案，例如创建3列并将DIV推入每个列。

如果真的不可能，如果你能回答为什么Col6 没有“坚持” Col1 ，我真的很感激？

以上可以从：

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

.col1{
  height:60px
}

和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>

这是jsbin中的live example。

我真的很感激任何帮助。

Answer 1

你应该只需要清除花车：

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

如果您需要支持旧浏览器，请改用此选择器：

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

如果您需要分别使用第5列和第6列与第2列和第3列的底部边框齐平，则无法单独使用浮点数来实现它。您需要找到其他方法，或使用类似jQuery Masonry的内容来布置您的页面。

第6列没有粘到第1列的唯一可能原因是因为它包装到新行，并且根据浮动模型，框不能高于其前面浮动框的底部。< / p>

Answer 2

您可以尝试从css上的“ col ”类中删除“ float：left; ”，并将其替换为“ display：inline-阻止; “它可能会起作用。不确定它是否适用于所有浏览器。只在chrome和mozilla上试过这个。

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

     display:inline-block; 
  }

http://jsbin.com/ajikoq/11/edit

的实例

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

2 个答案: