css - CSS 变量 2 列布局

Question

因此，我在互联网上查找了所有内容，但找不到我正在寻找的答案。

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

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

这是一个演示：

JSFiddle 示例

那么我做错了什么？

Answer 1

div边框宽度设置为 1px，因此它们将为两个s中的每一个添加额外的 2px 。因此，您的内容是 4px 太宽，不适合div.

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

Answer 2

使用 CSS3box-sizing: border-box;

添加这个-

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

在#info 和#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;
}