向右浮动总是将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

您需要将这两个<ul>分组为1个<div>，右侧<div>目前与第二个<ul>

对齐