HTML模板中重疊的div？

Question

我正在為我的網站設計一些模板。 我正在布局div並指定每個的高度和寬度。

我有一個名為main_cont的大型容器div。 在“ main_cont”中，我有三（3）個容器div，分別名為“ 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 。