css - 如何阻止我的 2 列布局将右侧浮动 div 推到下方？

Question

我在居中的背景 div 中有一个简单的 2 列布局。

这两列位于页面中心的较大 div 内。问题是右列可能会超出 1-2 像素，并将被推到第一个 div 的底部。我怎样才能阻止这种情况发生？我希望第二列向外推到周围 div 的右侧。

score 1 · Accepted Answer

几个选项。您可以将左列向左浮动，右列向右浮动。（如果你这样做，给容器overflow: hidden以使其环绕列，并确保列的组合宽度略小于容器的宽度，以防止您遇到问题并创建一个两列之间的空间。）

另一种选择是不浮动主要内容列，而是（假设它是右列）给它一个比左列宽度略宽的大左边距。然后浮动左列并确保它位于 HTML 中的右列之前。

还有其他方法，但这些可能是最常见的两种。

如果需要更多建议，最好查看您的页面代码。

score 0 · Accepted Answer

第二列与第一列底部对齐的原因是因为两个列宽的总和超过了该容器的大小，或者可能是因为您没有将浮点数（左/右）应用于该列。

我希望第二列向外推到周围 div 的右侧

这意味着您要将列从其容器中取出。您可以应用负值来实现这一点。

例子：

.right{
    position:relative;    /* apply position relative */
    right:-20px;          /* out from the container by 20px on right */
}

2 回答 2