CSS 变量 2 列布局

Question

所以我在整个互联网上查找了资料，但找不到我要找的答案。

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

现在出于某种原因，当我将两个 div 设置为 50% 和 float:left 时，第二个 div 会包裹在下面。我能得到的最接近的结果是将第二个 div 向右浮动并使宽度为 49%，但我希望它为 50%，因为我想让它们接触。

这是一个演示:

JSFiddle Example

那我做错了什么？

Answer 1

您为您的 DIV 定义边框。为它添加宽度，例如 50% + 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;
}