CSS變量2列布局

Question

所以我查找了所有在互聯網上的東西，我找不到我要找的答案。

我只是想爲我的頁面中的一個部分製作一個2列布局，每列都是相同的寬度，50％的容器。

現在，由於某種原因，當我將div設置爲50％和float：left時，第二個div將包裝在下面。我能得到的最接近的東西是將第二個div右移，並將寬度設置爲49％，但我希望它是50％，因爲我想讓它們觸摸。

這裏是一個演示：

JSFiddle Example

那我做錯了嗎？

Answer 1

您定義邊境你的DIV的。其中增加了寬度，例如5 0% + 2px。所以，使用框的大小：邊框;

這樣寫：

div#textBooks, 
div#info{ 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 

檢查這個http://jsfiddle.net/VbWbc/4/

注：這是工作的，直到上面IE8 &。

對於所有瀏覽器

入住這http://jsfiddle.net/VbWbc/5/ 這樣寫：

div#info{ 
    width:50%; 
    border:1px solid black; 
    background-color:red; 
    float:left; 
} 

div#textBooks{ 
    border:1px solid black; 
    background-color:green; 
    overflow:hidden; 
} 

Answer 2

邊框寬度設置爲1px，因此它們將爲兩個div s中的每一個添加額外的2px。因此，您的內容太寬而不適合div。

您需要做的是將div的內容包含在另一個div中，並將邊框應用於內部div。如在this fiddle中所見。

Answer 3

使用CSS3 box-sizing: border-box;

加入這個 -

-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
-o-box-sizing: border-box; 
box-sizing:border-box; 

在#inf O和#textBooks

Fiddle