如何阻止我的2列布局從下面推向右浮動div？

Question

我在居中的背景div中有一個簡單的2列布局。

兩列位於頁面中心的較大div內。 問題是，右列可能會超出1-2個像素，並將被推到第一個div的底部。 我該如何阻止這種情況的發生？ 我希望第二列向周圍div的右側推出。

Answer 1

有兩個選擇。 您可以將左列向左浮動，將右列向右浮動。 （如果這樣做，請給容器overflow: hidden以使其環繞在列上，並確保列的組合寬度比容器的寬度小一點，以防止出現問題，並且在兩列之間創建一個空格。）

另一個選擇不是浮動主要內容列，而是（假定它是右邊的列）為它提供一個較大的左邊距，該寬度比左邊列的寬度略寬。 然后浮動左列，並確保它位於HTML中的右列之前。

還有其他方法，但是這也許是兩種最常見的方法。

如果需要更多建議，最好查看您的頁面代碼。

Answer 2

第二列與第一列底部對齊的原因是兩個列的寬度之和都超過了該容器的大小，或者是因為您沒有對該列應用浮點數（左/右）。

我希望第二列向周圍div的右側推出

這意味着您要將列從其容器中取出。 您可以應用負值來實現此目的。

例：

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