用于定位元素的浏览器逻辑是什么:
基本上,正如我所理解的那样,这可以在没有bootstrap的情况下使用简单的容器块和不同高度的width: 33.333333%
块重新创建。为什么d
块在a
块下面没有浮动到左侧?
答案 0 :(得分:1)
您可能希望d
块位于包含e
和f
块的新行,但原因不在于因为有足够的水平< / strong>和第一行的垂直空间,使其位于c
块下方。
如果您从b
元素中删除换行符,则d
将被强制转移到下一行,因为没有更多的垂直空间可供填充。
.row {
overflow: auto;
}
div
{
border: 1px dashed maroon;
box-sizing: border-box;
}
div.col-md-4
{
margin-bottom: 1em;
width: 33.333333%;
float: left;
}
&#13;
<div class="container">
<div class="row">
<div class="col-md-4">a</div>
<div class="col-md-4">
b
</div>
<div class="col-md-4">c</div>
<div class="col-md-4">d</div>
<div class="col-md-4">e</div>
<div class="col-md-4">f</div>
</div>
</div>
&#13;
如果您向b
元素添加更多换行符,您会看到e和f也具有相同的行为。
如果浮点引用不是行框,则该元素会生成一个框 它浮动到块的开始和行开始的外边缘 浮动参考。
此外:
如果浮点引用不是行框,则该元素会生成一个框 它浮动到块的末端和行开始的外边缘 浮动参考。
对于浮点数,如果有足够的空间,它们自然会尝试逐行移动到containing
元素的开头或结尾。阻止这种情况发生的原因是通常没有足够的空间让他们坐在前一行的末尾,所以他们在下一行的开头重新定位
答案 1 :(得分:0)
如果您希望d
成为新行,为什么不将它拆分为2个不同的<div class="row">
1行中的总col应该是最大12次。如果你使它变得超过12,不要试试,这可能是因为定位变得混乱。