Css 具有%width和px边框的div

我正在尝试创建一个包含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>

.outter
{
右：100px；
边框：10px纯白；
}
梅因先生
{
溢出：隐藏；
宽度：100%；
高度：150像素；
}
左边
{
浮动：左；
宽度：40%；
身高：100%；
背景颜色：绿色；
右边框：5px纯白；
}
居中
{
浮动：左；
宽度：40%；
身高：100%；
背景色：红色；
左边框：5px纯白；
右边框：5px纯白；
}
.对
{
浮动：对；
宽度：20%；
身高：100%；
背景颜色：橙色；
左边框：5px纯白；
}

这就是我目前得到的。 -父div的右距离固定为100px，边框为10px白色，宽度为100%-100px； -内部div有40%+40%+20%，它们之间的距离为10像素（这就是为什么我把边框放在左边5和右边5的原因）

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

有人能帮我吗

---

关于，

您遇到了问题。元素不能有100%宽度，然后是10px边框，因为边框添加在100%宽度之外，这导致了您的问题

根据您想要支持的浏览器，您可以使用CSS3的属性。通过设置

框大小：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);

---

您可以使用

框大小调整

来进行此操作。如下所示：

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

选中此项：

---

“一个元素不能有100%的宽度，然后是10px的边框，因为边框是在100%宽度之外添加的，这导致了您的问题。”没错。谢谢Christofer。我将尝试/研究这个新的css3 calc（），但首先我需要完成它！就是这样！这就是我试图实现的。谢谢sandeep。