解决50%宽度div再加上边框无法左右排列问题

<div class="container">
<div class="box">left</div>
<div class="box">right</div>
</div>
平时我们想让两个div在并排占据左右两侧,我们设置
.box{
float:left;
width:50%;
}
然而当我们给这个box加上边框时,如
.box{
float:left;
width:50%;
border:1px solid black;
}
这时两个box就不能左右排列了,因为宽度不够了,不废话了,解决的方法就是使用设置
 box-sizing: border-box;
.box{
float:left;
width:50%;
border:1px solid black;
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
}
关于盒子模型的宽度计算问题,请参考这个博主的博客
阅读更多
文章标签: 盒子宽度
个人分类: html
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭