Question

我正在阅读一些网页的Html代码，其中作者基本上想要创建一个包含页眉，页脚和内容区域的页面。内容区域将分为三列，中间列的右边距和左边距设置为200px，这两个边距将由停靠在页面边框上的两个其他DIV填充，并具有绝对定位。

以下是作者的内容区域代码（为了清楚起见，我省略了页眉和页脚代码）：

<div id="container">

   <div id="container2">
      <div id="centercol">
      </div>
      <div id="rightcol">
      </div>
   </div>

   <div id="leftcol">
   </div> 

</div>

CSS文件：

   body
{
  margin: 0px;
  font-family: Verdana, Arial, Serif;
  font-size: 12px;
}


   #container
{
  background-color: #818689;
}

   #container2
{
  background-color: #bcbfc0;
  margin-right: 200px;
}

   #leftcol
{
  position: absolute;
  top: 184px;
  left: 0px;
  width: 200px;
  background-color: #bcbfc0;
  font-size: 10px;
}

   #centercol
{
  position: relative;
  margin-left: 200px;
  padding: 0px;
  background-color: white;
}

   #rightcol
{
  position: absolute;
  top: 184px;
  right: 0px;            
  width: 198px;
  color: White;
  background-color: #818689;
  font-size: 10px;
}

知道为什么作者决定将中间列和右列都放在container2中？我认为这样做没有任何优势，事实上它只会使页面的逻辑结构复杂化？！

感谢名单

Answer 1

看起来这是因为他可以根据centercol的宽度和位置有效地确定位置，同时允许内容的特定源顺序。有几种不同的方法可以做到这一点。我想他是这样做的，以避免使用浮动（以及IE6 compat的各种“修复”）。

不是我想做的方式，我不认为，但我认为它在宏伟的计划中适用于这个网站。

总的来说，有时你必须做一些有趣的事情来匹配一个comp与markup / css。根据设计师向您抛出的内容以及系统内所需的抽象级别（假设它基于某种动态内容），您最终可能会做一些不太可能被视为直截了当的事情。直到CSS及其浏览器实现的野兽的性质赶上了图形设计师： - ）

Answer 2

通常人们会考虑他们的布局和设计来调整他们的标记。这可能就是那篇文章的作者在将这两个部分放在一起时所做的事情。这不是我本来会做的，但与此同时你不想让自己在互联网上解决语义争论：）

我宁愿看到有人为内容创作网页，然后在CSS中设计它们（How To: Pure CSS Design）

Answer 3

如果作者想要搜索引擎目的，那么主要内容将首先出现，那将是一个原因。我不确定为什么他会使用绝对值，因为你无法清除它们，这会导致页脚出现问题。

以下设计不会使逻辑结构复杂化吗？

3 个答案: