重疊div在我的HTML模板？

Question

我正在爲我的網站設計一些模板。我正在鋪設divs並指定每個的高度和寬度。

我有一個名爲main_cont的大容器div。在'main_cont'中，我有三個（3）名爲'cont_left'，'cont_center'和'cont_right'的容器div。每個div都有三個div，分別命名爲left_1，left_2，left_3，center_1等...

我想自由添加內容到名爲left_1，left_2，left_3的div，但我不想必須不斷調整它們的大小。現在，當我放置所有這些div時，它們似乎位於屏幕的右側。

我該如何定位它們並將它們放在這些位置，但是仍然可以垂直調整大小而不重疊？

Answer 1

你應該使用類似960 Grid System的東西。它將消除編寫乾淨的CSS規則的負擔，以便被主流瀏覽器正確解釋。這使您可以花更少的時間來處理佈局，並且可以讓更多時間取得進展。

從它的聲音，你的佈局應該是這樣的：

<div id="main_cont" class="container_12"> 
    <div id="cont_left" class="grid_3"> 
    <!-- Left Column --> 
    <div id="left_1"></div> 
    <div id="left_2"></div> 
    <div id="left_3"></div> 
    </div> 
    <div id="cont_center" class="grid_6"> 
    <!-- Center Column --> 
    <div id="center_1"></div> 
    <div id="center_2"></div> 
    <div id="center_3"></div> 
    </div> 
    <div id="cont_right" class="grid_3"> 
    <!-- Right Column --> 
    <div id="right_1"></div> 
    <div id="right_2"></div> 
    <div id="right_3"></div> 
    </div> 
    <div class="clear"></div> 
</div> 

另一個良好做法是根據自己的視覺表現不名稱的元素，如left_1。佈局可能會改變，所以您的標識符將來可能會變得具有欺騙性。相反，給他們與他們的目的相關的名字，如navigation_1。