Question

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

这两列位于一个较大的div中，该div位于页面的中心。问题是右列可能是1-2像素，并将被推到第一个div的底部。我怎么能阻止这种情况发生？我宁愿第二列向外推到周围div的右边。

Answer 1

有两种选择。您可以向左浮动左列和右列。（如果你这样做，给容器overflow: hidden，使它包裹在列周围，并确保列的组合宽度略小于容器的宽度，以防止你遇到的问题并在两列之间创建一个空格。）

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

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

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

Answer 2

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

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

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

示例：

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