CSS变量2列布局
所以我在互联网上到处找东西都找不到我想要的答案。
我只是试着为我的页面中的一个部分做一个两列的布局，每一列都是相同的宽度，容器的50%。
现在，由于某种原因，当我将两个div都设置为50%和float:left时，第二个div在下面包装。我能得到的最接近的方法是将第二个div向右浮动，使宽度达到49%，但我希望它是50%，因为我想让它们接触。
下面是一个演示：
JSFiddle Example
那么我到底做错了什么呢？
回答 3
Stack Overflow用户
发布于 2012-09-06 13:39:08
你可以给你的DIV定义，这样就可以增加宽度，比如50% + 2px。因此，使用边框调整大小：-box；
像这样写：
div#textBooks,
div#info{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}检查此http://jsfiddle.net/VbWbc/4/
注意: it's work's till 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;
}Stack Overflow用户
发布于 2012-09-06 13:38:27
边框宽度设置为1px，因此它们将为两个div中的每一个添加额外的2px。因此，您的内容太宽，无法放入该div中。
您需要做的是将div的内容封装在另一个div中，并将边框应用于内部div。就像在this fiddle中看到的那样。
Stack Overflow用户
发布于 2012-09-06 13:38:34
使用CSS3 box-sizing: border-box;
加上这个-
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing:border-box;在#info和#textBooks中
https://stackoverflow.com/questions/12293531
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号