創建三行佈局

Question

我目前正在創建三行佈局的過程中，目前爲止沒有太多困難。問題出現了，因爲我需要每行都是100％寬度來填充任何分辨率的顏色，而且我還需要每行內部的div爲1024/960像素並居中。

東西沿着這些路線：

<div class="top"> <!--This needs to be 100%--> 
    <div class="logo-holder"></div> <!--This needs to be 1024px centered--> 
    <div class="menu-holder"></div> <!--This needs to be 1024px centered--> 
</div> 
<div class="main"> <!--This needs to be 100%--> 
    <div class="rotating-banner"></div> <!--This needs to be 1024px centered--> 
    <div class="promo-holder"> <!--This needs to be 1024px centered--> 
     <div class="promo-banner"></div> 
     <div class="games-list"></div> 
    </div> 
</div> 
<div class="footer"> <!--This needs to be 100%--> 
    <div class="footer-holder"></div> <!--This needs to be 1024px centered--> 
</div> 

TNKS提前， 託尼奧

Answer 1

.top, .main, .footer { 
    width: 100%; 
    text-align: center; 
} 
.logo-holder, .menu-holder, .rotating-banner, .promo-holder, .footer-holder { 
    width: 1024px; 
    margin: 0 auto; 
    text-align: left; 
} 

應該這樣做。

Answer 2

默認情況下，div將佔用100％的寬度，因爲它們是塊級元素。

對於頂部，主要，頁腳的類添加margin:0px auto;爲這些divs，添加您的寬度。

這可能不是在IE中心，因此也增加text-align:center;，然後在內部的div添加text-align:left;

Answer 3

.top { width:100%; margin:0 auto; } 
.logo-holder, .menu-holder {width:1024px; margin:0 auto } 

但是，你應該使用人&等獨特的包裝元素的ID。