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

【问题标题】：How do I Achieve this layout without fighting CSS如何在不与 CSS 对抗的情况下实现此布局
【发布时间】：2011-05-26 06:02:48
【问题描述】：

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

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

这是容器 div (div id=Main) 的 CSS 样式

#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 在 body 中的堆叠方式

<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 中的方法）

【问题讨论】：

标签： css templates height html

【解决方案1】：

您似乎真的在与该页面上的 CSS 作斗争。您的大多数元素都绝对定位在您的 #Main 类中。这将迫使您指定比您真正想要的更多的布局。这也意味着，如果您拥有可变数量的 cmets 或动态内容，您会发现在没有其他人妨碍的情况下扩展内容容器要困难得多。

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

您会发现该结构（有很多好的、可行的示例）很容易理解，并且更容易适应您想要实现的各种布局。

【讨论】：

是的，我担心我将不得不重做布局。谢谢你的链接，我会调查的。

【解决方案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 的数量以保持文件轻量，以补偿您正在使用的图像数量。不要担心这个。就文件大小而言，文本文档（例如 HTML）与图像相比微不足道。但是，他并不意味着您应该像免费一样抛出标记；）

最后一件事。我注意到您正在使用<img> 元素来渲染您的装饰图像。尝试使用 CSS 将它们设置为相应<div>s 中的背景图像。这不仅会帮助您使结构更简洁、更容易实现，而且还会在表示内容的图像和表示装饰的图像之间划清界限。

【讨论】：

【解决方案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 }

抱歉，现在没时间测试，但乍一看，我没有发现这段代码有任何问题 - 如果有什么问题，请编写 cmets

【讨论】：