42

我已经以百分比定义了容器的宽度。我想添加一个边框（宽度右侧 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%，但我想精确地做。

4

5 回答 5

97

使用该box-sizing: border-box物业。它修改了盒子模型的行为，将填充和边框视为元素总宽度的一部分（但不是边距）。这意味着元素的设置宽度或高度包括为填充和边框设置的尺寸。在您的情况下，这意味着元素的宽度和边框的宽度将消耗 30% 的可用空间。

CSS 盒子模型

对它的支持并不完美，但是供应商前缀将捕获大多数（如果不是所有）现代浏览器：

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

于 2012-06-17T09:05:46.603 回答
5

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

于 2012-06-17T10:15:48.453 回答
2

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

您可能也对该box-sizing物业感兴趣，请查看：

于 2012-06-17T08:59:11.803 回答
0

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

于 2021-05-07T00:06:52.523 回答
-2

改成px喜欢vw就好

border-width: 10px;

到

border-width: 10vw;

它做什么百分比做什么......

于 2014-04-20T10:32:33.643 回答