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/