html - 3 列 Div 样式

Question

由于一些奇怪的原因，我无法让它正常工作(对于 3 列布局)，它们显示时好像它们在不同的行上。 ------------------CSS----------------

.left_content{
    float:left;
    position:relative;
    width:30%;
    padding:10px;
    margin-right:0px;
    margin-left:0px;
    border-style:solid;
    border-width:2px;
    background-image: url(../images/right_divider.gif);
    background-repeat: no-repeat;
    background-position: left bottom;   



}


.center_content{
    float:left;
    position:relative;
    width:40%;
    padding:10px;
    margin-left:10%;
    border-style:solid;
    border-width:0px;
    background-image: url(../images/right_divider.gif);
    background-repeat: no-repeat;
    background-position: left bottom;   

}
.right_content{
    float:right;
    position:relative;
    width:20%;
    padding:10px;
    border-style:solid;
    border-width:0px;
    background-image: url(../images/right_divider.gif);
    background-repeat: no-repeat;
    background-position: left bottom;   

}
---------------html--------------
<div class="left_content">
    Nav Left
    </div>


    <div class="center_content">
    main Con<br>main Con<br>main Con<br>main Con<br>main Con<br>main Con<br>main Con<br>
    </div>


<div class="right_content">
    right Con
    </div>

Answer 1

@弗兰克；正如您在代码中看到的那样，三个 div's 的总宽度超过 100%。原因是 padding 和 border 是给 div 添加宽度。因此，您可以为此使用 css3 box-sizing 属性。它停止填充以增加 div 的宽度。

CSS:

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;

检查这个例子http://jsfiddle.net/wVfeG/

注意:IE7 不支持box-sizing 属性。因此，您可以从您的 div 中删除 padding 并为其子元素提供 margin。