具有 % 宽度和 px 边框的 div

Question

我正在尝试创建一个内部有 3 个 div 的 div。

    .outter
    {
        right: 100px;
        border: 10px solid white;
    }
    .main
    {
        overflow: hidden;
        width: 100%;
        height: 150px;
    }
    .left
    {
        float: left;
        width: 40%;
        height: 100%;
        background-color: green;
        border-right: 5px solid white;
    }
    .center
    {
        float: left;
        width: 40%;
        height: 100%;
        background-color: red;
        border-left: 5px solid white;
        border-right: 5px solid white;
    }
    .right
    {
        float: right;
        width: 20%;
        height: 100%;
        background-color: orange;
        border-left: 5px solid white;
    }



<div class="outter">
    <div class="main">
        <div class="left">
        </div>
        <div class="center">
        </div>
        <div class="right">
        </div>
    </div>
</div>

这是我到目前为止所得到的。 -父div应该有一个固定的100px的正确距离，一个10px的白色边框，宽度是100% - 100px； - 内部 div 有 40% + 40% + 20%，它们之间的距离为 10 px（这就是为什么我把边界左 5 和边界右 5。

我在设置时遇到问题。我需要的是有固定大小的边框和右边的边距。其他 div 应该是动态的以填充 100% 的宽度。

谁能帮帮我？

问候，

Answer 1

您可以为此使用box-sizing。像这样写：

.main,
.main >*{
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}

检查一下：

http://jsfiddle.net/ubtdT/

Answer 2

box-model 有问题。一个元素不能有 100% 的宽度和 10px 的边框，因为边框是在 100% 宽度之外添加的，这会导致您的问题。

根据您打算支持的浏览器，您可以使用 CSS3 的 box-sizing 属性。通过设置box-sizing: border-box;，您可以强制浏览器以指定的宽度和高度渲染盒子，并在盒子内添加边框和填充。哪个应该可以解决您的问题。请注意旧版浏览器的有限支持。

如果您想进行更多实验，可以使用新的 CSS3 calc() 来实际计算动态宽度：

/* Firefox */
width: -moz-calc(75% - 100px);
/* WebKit */
width: -webkit-calc(75% - 100px);
/* Opera */
width: -o-calc(75% - 100px);
/* Standard */
width: calc(75% - 100px);