1

我知道从标题很难理解这个问题，所以我会用实际例子来解释。

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

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

截屏

在上图中，您可以看到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 中的实时示例。

我真的很感激任何帮助。

4

2 回答 2

4

您应该能够简单地清除浮动：

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

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

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

但是，如果您需要将第 5 列和第 6 列分别与第 2 列和第 3 列的底部边框齐平，则仅使用浮点数是无法实现的。你需要找到另一种方法来解决它，或者使用jQuery Masonry之类的东西来布置你的页面。

你的第 6 列没有贴到你的第 1 列的唯一可能原因是因为它换行了，并且根据浮动模型，一个盒子不能高于其前面浮动盒子的底部。

于 2012-10-05T04:37:21.793 回答
1

您可以简单地尝试从您的 CSS 上的“ col ”类中删除“ float:left; ”并将其替换为“ display:inline-block; ”，它可能会起作用。不确定它是否适用于所有浏览器。只在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上的实时示例

于 2012-10-05T04:51:25.913 回答