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

@frank;正如您在代码中看到的那样，三个div's的总宽度超过100%。原因是padding＆amp; 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＆amp;中删除padding给margin to it's child。

Answer 2

<body>
<div id="header">
<h1>Header</h1>
</div>
<div id="left">
Port side text...
</div>
<div id="right">
Starboard side text...
</div>
<div id="middle">
Middle column text...
</div>
<div id="footer">
Footer text...
</div>
</body>
And here's the CSS code:
body {
margin: 0px;
padding: 0px;
}
div#header {
clear: both;
height: 50px;
background-color: aqua;
padding: 1px;
}
div#left {
float: left;
width: 150px;
background-color: red;
}
div#right {
float: right;
width: 150px;
background-color: green;
}
div#middle {
padding: 0px 160px 5px 160px;
margin: 0px;
background-color: silver;
}
div#footer {
clear: both;
background-color: yellow;
}

OR 以下链接为您服务（http://www.neuroticweb.com/recursos/3-columns-layout/）

Answer 3

您应该从CSS3中观察列宽/列间距:) http://www.css3.info/preview/multi-column-layout/

Answer 4

如果你给

margin-left:10%;然后你必须将.center_content班级宽度减少为35。

3列Div样式

4 个答案: