3 Column Div樣式

由於一些奇怪的原因，我無法使其正常工作（對於3列布局），它們顯示爲在不同的行上。 ------------------- CSS -----------------3 Column Div樣式

.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>

來源

2011-07-13 Frank Nwoko

任何人請？ –

@frank;就像你在代碼中看到的那樣，三個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 to it's child。

來源

2011-07-13 11:28:49 sandeep

<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/）

來源

2011-07-13 11:18:13

你應該小心從CSS3 :)列寬/列隙 http://www.css3.info/preview/multi-column-layout/

來源

2011-07-13 12:35:15 Simon

如果你給

margin-left:10%;那麼你必須減少.center_content類寬度35

來源

2011-07-13 13:11:24 Thamaraiselvi