如何在不与CSS对抗的情况下实现此布局

Question

我知道这个问题有几个问题，但我有一个相当独特的困境。我正在开发一个必须包含某些标签的模板，并且必须使用我上传代码后添加到模板中的其他元素。我不担心这个，但我有时间试图让页脚显示在页面底部。我无法改变有关页脚的任何内容，它显示在div的底部我用作包装器。问题是如果我将高度设置为固定值，则只有在注释div与页脚重叠之前才会生成这么多注释。我尝试了几种不同的解决方案，包括将容器div的高度设置为auto，溢出到auto，底部边距为65（页脚的高度），并设置溢出以滚动注释div（导致非常松散的注释）。 / p>

Here is an example of the problem and the template as it stands.

这是容器div的div样式（div id = Main）

#Main {
 margin: 0px auto auto auto;
 background-color: #808080;
 font-family: Verdana, Geneva, Tahoma, sans-serif;
 font-size: medium;
 font-variant: normal;
 color: #FFFFFF;
 width: 900px;
 position: relative;
}

这是评论div的CSS样式

#Comments {
 background-color: #008080;
 width: 450px;
 height: auto;
 top: 1750px;
 left: 450px;
 position: absolute;
 overflow: auto;
}

以下是div如何堆积在体内

<div id="Main">
...
 <div id="Comment_Form">
 <!--[COMMENT_FORM=400,200]-->
 </div>

 <div id="Comments">
 <!--[COMMENTS=400]-->
  Comments
 </div>
</div>

由于页面图像很重，我试图让代码保持轻量级（并且可能会非常糟糕）。

感谢您的帮助，如果有人需要，我现在就发布模板。

编辑：

好吧，我发现a）我需要重做CSS和我已经失去的div，以及b）我不知道如何使用纯CSS来做到这一点，或者至少与它作为一个对抗你说过。我想要实现的是：

我不知道如何做到这一点。并且将非常感谢任何帮助（以及避免在其自己的div中拥有每个元素的任何方式）

Answer 1

你似乎真的在那个页面上对抗你的CSS。您的大多数元素都位于#Main类中。这将迫使您指定比您真正想要的更多布局。这也意味着，如果您有不同数量的评论或动态内容，您会发现扩展内容容器要困难得多，而其他人则不会受到阻碍。

我强烈建议您查看利用Nicole Sullivan's OOCSS framework等网格布局的CSS框架或方法。

你会发现这个结构（有很多好的，可行的例子）很容易理解，并且更适合你想要实现的各种布局。

Answer 2

我希望这有用。

这是一个非常基本的布局，您可以使用。

在你的CSS中：

  #header, #content, #comments{
    margin: 0 auto;
    width: 960px;
    overflow: hidden;
  }
  #author-comments{
    width: 100%;
  }
  #comment-box{
    float: left;
    width: 50%;
  }
  #comment-list{
    float: right;
    width: 50%;
  }

在你的标记中：

<div id="header">
  Header
</div>
<div id="content">
  Contents
<div>
<div id="comments">
  <div id="author-comments">
    Author comments
  </div>
  <div id="comment-box">
    Comment box
  </div>
  <div id="comment-list">
    Comment list
  </div>
</div>

在没有样式的情况下使用有意义的标记非常重要。不要将div视为普通框，而应将div视为为文档提供结构的实际内容容器。

在旁注中，您提到您担心div的数量会使文件保持清淡，从而补偿您正在使用的图像数量。别担心这个。文本文档（例如HTML）在文件大小方面与图像无关。但是，他的意思并不是说你应该将标记视为免费;）

最后一件事。我注意到您正在使用<img>元素来渲染装饰图像。尝试使用CSS将它们设置为相应<div>中的背景图像。这不仅可以帮助您更清晰，更容易实现结构，还可以在代表内容的图像和代表装饰的图像之间画一条线。

Answer 3

我会在没有任何测试的情况下编写如何在图像上编码布局的代​​码：

<强> HTML：

<div id="header" class="centered"></div>
<div id="content" class="centered">
  <div id="navigation"></div>
  <div id="content"></div>
</div>
<div id="comments" class="centered">
  <div id="author-comments" class="centered"></div>
  <div class="centered">
    <div id="comment-field"></div>
    <div id="user-comments"></div>
  </div>
</div>

<强> CSS：

* { margin:0px; padding:0px }
html { height:100% }
body { height:100% }
.centered { position:relative; margin:0 auto; width:960px }
#header { height:100px; background:#333 }
#content { overflow:hidden }
#author-comment { overflow:hidden; margin:30px auto }
#comment-field { position:relative; float:left; width:480px; overflow:hidden }
#user-comments { position:relative; float:left; width:480px; overflow:hidden }

抱歉，现在没时间进行测试，但是在第一次查看时，我没有看到此代码出现任何问题 - 如果出现问题，请写评论