html - 向右浮动总是将 div 带到右下角

Question

这是一个带有我的代码示例的示例小提琴：

http://jsfiddle.net/V5KHy/2/

我遇到的问题是带有类的 div：

col r no-padding

并在计算出的 css 中评估为：

.cols.two.alt > .col.r {
      padding: 0 10px;
      float: right;
      width: 27%;
}

为什么现在这个 div 位于右下角而不是第一个 ul 旁边的顶部？

Answer 1

这是因为您在 HTML 中放置元素的顺序。当你浮动一个元素时，它只会相对于它之后的内容浮动，而不是它之前的内容。所以当你有这样的结构时：

<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 的右侧。永远记住，如果你是浮动内容，它必须在你希望它旁边的东西之前浮动。

Answer 2

您需要将这 2 个分组<ul>为 1 <div>，右侧<div>当前与第 2 个对齐<ul>