Html 当DIV1'时，是否有方法将DIV4浮动到同一类的第一个DIV1下；s的高度略大于DIV2和DIV3的高度？
我知道很难从题目中理解这个问题，所以我将用真实的例子来解释它Html 当DIV1'时，是否有方法将DIV4浮动到同一类的第一个DIV1下；s的高度略大于DIV2和DIV3的高度？,html,css,css-float,Html,Css,Css Float,我知道很难从题目中理解这个问题，所以我将用真实的例子来解释它 服务器生成包含内容的div并发送到浏览器 每个DIV都有相同的类：例如，“.column” 所有div的高度“几乎”相同。一个可以比另一个稍高或稍短 目标是强制浮动：左所有列，即使上面的第一列比其同级列高。请参见下面的屏幕截图 在上图中，您可以看到Col4在Col1下是而不是，因为Col1的高度比它的兄弟姐妹高有没有办法强制Col4 DIV在Col1 DIV下向左浮动？ 我正在寻找一个本地CSS解决方案，如果可能的话。而且我不需要简
.column.col{
float:left;
height:50px;
width:130px;
border-left: 1px solid;
border-bottom: 1px solid;
}
.col1{
height:60px
}
<!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>
JS-Bin
可乐
可乐
可乐
可乐
可乐
可乐6
我非常感谢您的帮助。您只需清除浮动即可：
.col:nth-child(4) {
clear: left;
}
.col1 + .col + .col + .col {
clear: left;
}
第6列未与第1列对齐的唯一可能原因是，它正在换行，并且根据浮动模型，框不能高于前面浮动框的底部。您应该能够清除浮动：
.col:nth-child(4) {
clear: left;
}
.col1 + .col + .col + .col {
clear: left;
}
第6列没有与第1列对齐的唯一可能原因是，它正在换行，并且根据浮动模型，框不能高于前面浮动框的底部。您可以尝试从您的“列中删除“浮动：左；”在css上初始化并将其替换为“显示：内联块；”，它可能会工作。不确定它是否适用于所有浏览器。我只在chrome和mozilla上试用过
.col{
/*float:left;*/
height:50px;
width:130px;
border-left: 1px solid;
border-bottom: 1px solid;
display:inline-block;
}
在上，您可以简单地尝试从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;
}
现场示范Nice！简单而有效。但不幸的是，我“必须”坚持使用浮动列，因为我使用的响应性Zurb/Foundation默认使用浮动列。很好！简单而有效。但不幸的是，我“必须”坚持使用浮动列，因为我使用的响应性Zurb/Foundation默认使用浮动列。