div为％width和px border

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);