CSS:宽度百分比和边框

Question

我用百分比定义了容器的宽度.我想添加一个边框(宽度右侧3px),因为容器宽度是%,而边框宽度是px,我该如何调整容器的宽度？

<div class="wrap">
  <div class="left">...</div>
  <div class="right">...</div>
</div>

.wrap{
    width:100%;
}

.left{
    width:30%;
}

.right{
    width:70%;
}

我想在.left的右侧添加3px边框.例如:

.left{
    width:30%;
    border:3px solid #000;
}

由于我在%中定义了宽度,因此重新调整.left宽度的最佳方法是什么.我可以粗略地将宽度减小到29%,但我想要做到精确.

Answer 1

使用该box-sizing: border-box属性.它修改了框模型的行为,以将填充和边框视为元素总宽度的一部分(但不是边距).这意味着元素的设置宽度或高度包括为填充和边框设置的尺寸.在您的情况下,这将意味着元素的宽度和边框的宽度将占用可用空间的30%.

对它的支持并不完美,但是供应商前缀将捕获大多数(如果不是全部)现代浏览器:

.left {
    width: 30%;
    border: 3px solid #000;

    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

可以在MDN和Quirksmode上找到更多信息.

根据Quirksmode,使用上面的3个供应商前缀(-moz-,-webkit-和-ms-),您可以获得对所有浏览器的支持,甚至是IE8.

Answer 2

跨浏览器最简单的方法是不在外部div上设置边框，而在内部的new div上设置边框.left。简单，效果很好。