1

这是我的jsfiddle。

我有一个使用“clearfix”类的容器。其中有 3 篇文章，前两篇以 70% 宽度向左浮动，最后一篇以 30% 宽度向右浮动。

我的期望是浮动的右文章将填充开放空间并与右上角对齐......但它与最后一个浮动的左文章对齐。

有没有办法强制这个浮动的右文章与顶部对齐，而不诉诸定位？

谢谢！

编辑：我应该详细说明，遗憾的是在这种情况下我几乎无法控制标记......我无法将前两篇文章包装在自己的容器中。此外，每篇文章的高度都是不可预测的。如果我绝对定位右对齐的文章，并且它的高度比组合的左对齐文章长......那么我会有一个文章元素溢出到页脚上。

.left {
    float: left;
    width: 70%;
    height: 240px;
}
.right {
    float: right;
    width: 30%;
    height: 340px;
}
.clearfix:before,
.clearfix:after,
.checkboxset:before,
.checkboxset:after {
    content: " ";
    display: table;
}
.clearfix:after,
.checkboxset:after {
    clear: both;
}
4

1 回答 1

4

float 的问题是它从 DOM 中删除了浮动元素，因此它不再知道其他元素在哪里来对齐自身。您需要将它包装在一个未浮动的 div 中，然后对齐它。包装元素也需要是“溢出：隐藏”，因此它将包含整个浮动元素。

于 2013-08-14T17:34:46.017 回答