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

我知道很难从标题中理解问题，所以我将以实际的例子来解释它。当DIV1的高度稍大于DIV2和DIV3时，是否有办法在同一类的第一个DIV1下浮动DIV4？

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

的目标是迫使浮动：左所有即使上面的第一列是比其兄弟姐妹高列。看下面的截图。

screenshot

在上图中可以看到，COL4是不下Col1中因为Col1中的高度比它的兄弟姐妹更高。 有没有办法强迫Col4 DIV在Col1 DIV下左移？

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

如果这是真的不可能，我会很感激，如果你能回答为什么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。

我真的很感激任何帮助。

来源

2012-10-05 Eye

您应该简单地可以清除浮动：

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

如果您需要支持旧的浏览器，使用这个选择来代替：

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

如果你需要你的第5和第6列分别与第2列和第3列的底部边界齐平，但无法单独使用浮动功能实现。你需要找到另一种方式，或使用诸如jQuery Masonry之类的东西来布置你的页面。

为什么你的第6列不粘到你的第1列的唯一可能原因是它包装到一个新的行，根据浮点模型，一个盒子不能高于其前面浮动框的底部。

来源

2012-10-05 04:37:21 BoltClock

大活生生的例子！完美的答案！ – Eye

你可能只是尝试删除“浮动：左;”从你“山坳”级上你的CSS，取而代之的是“显示：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-05 04:51:25 wdonayredroid

不错！简单而有效。但不幸的是，我“必须”坚持浮动列，因为它默认使用我使用的响应式Zurb/Foundation。 – Eye

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

回答

相关问题