2013-02-17 158 views
0

我試圖用3個div創建頁眉:一個左對齊,一個右對齊,另一個居中。 enter image description herecss頁眉佈局寬度3 divs

該頁面是例如1200px 黑色,紅色和黃色的矩形是960px並居中在頁面中。 將黑色矩形中的元素添加到左側, 將yellwo矩形中的元素添加到右側, 並將紅色矩形中的元素居中。

這是一個網站

回答

2

這將解決您的問題

<div class="header" style="width:1200px;"> 
<div style="width:40%;float:left;" class='black-one'> 
    <div style='float:left;'>Some content</div> 
    <div style="clear:both"></div> 
</div> 
<div style="width:20%;float:left;" class='red-one'> 
    <div style="margin:10px auto;text-align:center">Some content</div> 
    <div style="clear:both"></div> 
</div> 
<div style="width:40%;float:left;" class='yellow-one'> 
<div style='float:right;text-align:right;'>Some content</div> 
     <div style="clear:both"></div> 
</div> 
<div style="clear:both"></div> 
</div> 
+0

你得到了列,但內容也必須相應地調整每列。 – kjetilh 2013-02-17 11:20:59

+0

這是一個很好的概述,謝謝! – Vjeetje 2013-02-17 21:02:25

+0

謝謝,但我建議不要使用內聯css,而是使用外部css文件進行樣式設置。如果它能幫助你,你能投票嗎? – 2013-02-19 05:52:10

0

我寫了一篇文章在此回到這裏,一會兒是我的代碼的頭很好的通用性案例研究...

<div id="mainContent"> 

    <div id="col1"> 

    Column 1 

    </div> 

    <div id="col2"> 

    Column 2 

    </div> 

    <div id="col3"> 

    Column 3 

    </div> 

    <div id="clearance" style="clear:both;"></div> 

</div> 

這裏是它的CSS ....

#mainContent { 

    width: 1000px; 

    margin-right: auto; 

    margin-left: auto; 

    text-align: center; 

} 

#col1 { 

    margin: 10px; 

    float: left; 

    width: 300px; 

} 

#col2 { 

    margin: 10px; 

    float: left; 

    width: 300px; 

} 

#col3 { 

    margin: 10px; 

    float: left; 

    width: 300px; 

} 

希望這有助於...菲利普·杜斯

+0

你得到了列,但內容也必須爲每一列相應的調整。 – kjetilh 2013-02-17 11:20:19

0

試試這個..

<style> 
.header { margin: 0px auto; width: 1200px; } 
.floatt { float: left; margin-right: 5px;} 
.black-one { width: 40%;} 
.red-one { width: 20%;} 
.yellow-one { width: 40%;} 
.clear { clear: both;} 
</style> 

<div class="header"> 
<div class='black-one floatt'> 
Some content 
</div> 
<div class='red-one floatt'> 
Some content 
</div> 
<div class='yellow-one floatt'> 
Some content 
</div> 
<div class="clear"></div> 
</div>