在我的HTML模板中重叠div？

Question

我正在为我的网站设计一些模板。我正在铺设div并指定每个div的高度和宽度。

我有一个名为main_cont的大型容器div。在'main_cont'中，我有三（3）个容器div，名为'cont_left'，'cont_center'和'cont_right'。这些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。