这是一个带有我的代码示例的示例 fiddle :
我遇到的问题是带有类的 div:
col r no-padding
在计算的 css 中,它的计算结果是这样的:
.cols.two.alt > .col.r {
padding: 0 10px;
float: right;
width: 27%;
}
为什么现在这个 div 位于右下角而不是第一个 ul 旁边的顶部?
最佳答案
这是因为您在 HTML 中放置元素的顺序。当您 float 一个元素时,它只相对于它之后的元素 float ,而不是它之前的元素。所以当你有这样的结构时:
<ul>
<!-- stuff -->
</ul>
<div style='float: right;'>
<!-- stuff -->
</div>
div 将始终出现在 ul 下方,因为这就是它们在 HTML 标记中的组织方式。如果你想让div在ul的右边,那么你需要改变顺序:
<div style='float: right;'>
<!-- stuff -->
</div>
<ul>
<!-- stuff -->
</ul>
这会将 div 放在 ul 的右侧。永远记住,如果您要 float 内容,它必须在您希望它紧邻的内容之前 float 。
关于html - 向右浮动总是将 div 带到右下角,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18649141/