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

Question

这是一个示例小提琴，上面有我的代码示例：

我遇到的问题是班级的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>当前与第二个<ul>对齐