CSS变量2列布局

Question

因此，我在整个Internet上查找了东西，但找不到所需的答案。

我只是想为页面的一部分制作2列布局，每列的宽度相同，即容器的50％。

现在由于某种原因，当我将两个div都设置为50％且float：left时，第二个div环绕在下面。 我能得到的最接近的东西是将第二个div向右浮动，并使宽度为49％，但我希望为50％，因为我想让它们接触。

这是一个示范：

JSFiddle示例

那我在做什么错？

Answer 1

边框宽度设置为1px，因此它们将向两个div的每一个添加额外的2px。 因此，您的内容太宽4px，无法容纳该div 。

您需要做的是将div的内容包含在另一个div ，并将边框应用于内部div 。 就像在小提琴中看到的那样。

Answer 2

使用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

小提琴

Answer 3

您定义DIV的边框 。 其中，将其添加宽度例如为5 0% + 2px 。 因此，请使用box-sizing：border-box;

这样写：

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;
}