css頁眉佈局寬度3 divs

Question

我試圖用3個div創建頁眉：一個左對齊，一個右對齊，另一個居中。

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

這是一個網站

Answer 1

這將解決您的問題

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

Answer 2

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

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

} 

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

Answer 3

試試這個..

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