带有 % 宽度和 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（这就是为什么我将 border-left 5 和 border-right 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);