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％。

CSS box model

对它的支持并不完美，但是如果不是所有现代浏览器，供应商前缀将会捕获大部分内容：

.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上找到更多信息。

According to Quirksmode，使用上面的3个供应商前缀（-moz-，-webkit-和-ms-），您可以获得对所有浏览器的支持，甚至是IE8。

Answer 2

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

Answer 3

这有点棘手，但请查看这篇文章以解决它：

Percentage Plus Pixel Sizing（和Example）
Box Sizing on CSS-Tricks（和Example）

box-sizing属性也可能对您有用，请查看：

How do I add 1px border to a div whose width is a percentage?

Answer 4

只需将px更改为vw

即可

border-width: 10px;

到

border-width: 10vw;

它做了多少百分比....

Answer 5

在我的情况下，我最终添加了一个外部 div，其填充大小与我希望原始边距的大小相同，宽度为 100%。这允许我将内部 div 宽度设置为 100%，完全适合内边距（这将作为我之前设置的边距）

CSS：宽度百分比和边框

5 个答案: