CSS中惊人的高级布局

Question

我有以下 HTML 结构：

<div class="container">
   <div class="sidebar"></div>
   <div class="content"></div>
   <div class="subscript"></div>
</div>

我需要以下布局：

┌─────────┬───────────────────────┐
│         │                       │
│ sidebar │       content         │
│         │                       │
│         │                       │ 
├─────────┤                       │
│         │                       │
│    w    ├─────────┬─────────────┤
│         │subscript│      w      │
└─────────┴─────────┴─────────────┘

w - 是空格

容器必须具有固定宽度和灵活高度（必须扩展以适应其内容）

侧边栏必须具有固定的宽度和高度并且是顶部对齐的。

内容必须位于侧边栏的右侧并占据所有可用的水平空间。它必须是垂直可扩展的，以适应其文本

下标必须位于内容的正下方并与其左对齐。此外，它必须水平展开，以适应其文本（订阅）

如何使用纯 CSS 来完成？

Answer 1

高级？几乎不。最简单的：

/* Fix page width. As per requirements, but questionable IMO. Why not liquid? */
.container { width: 750px; margin: 0 auto; }

/* Sidebar on left, other elements moved to the right */
.sidebar { float: left; width: 150px; }
.content, .subscript { margin-left: 150px; }

/* Make subscript shrink its width to fit its content */
.subscript { display: inline; }

为了使其尺寸“缩小以适应”其文本，使下标内联有点作弊。这可能会也可能不会接受，具体取决于 .subscript 的实际情况。

如果您希望 .subscript 保持块显示元素，还有其他几种方法可以做到这一点。例如，float: left 在.subscript 上没有明确的width。然后，您需要在容器结束之前在新元素上显式地使用 clear: left，或者，如果您根本不想更改标记，则需要在 .container 上进行自清除 hack（例如 @ 987654329@ hack，如 dhabersack 所述；如果您需要 IE6 支持，请检查 hasLayout 修复）。

Answer 2

这似乎可以使用 960.gs 或其他 CSS 网格轻松实现而不会有太多麻烦。

您可以很好地免费获得空白，因此我们将忽略这些。

您需要固定侧边栏的宽度，并且它需要具有灵活的高度，因此您只需要一个具有宽度的“单元格”（例如 24 列中的 9 列）。 content 然后取剩余的（例如 15）列。

您需要在下标单元格前加上一些列（与侧边栏单元格占用的相同），然后给下标一个固定的列数。

这将涉及对您的标记进行一些调整，如下所示：

<div class="container_12">
   <div class="sidebar grid_9"></div>
   <div class="content grid_15"></div>
   <div class="clear"></div>
   <div class="subscript prefix_9 grid_7"></div>
   <div class="clear"></div>
</div>

Answer 3

看起来您可以使用简单的两列布局，左侧是侧边栏，右侧是内容，其中包含下标的子项。

<style type="text/css">
    #container { width: 800px; overflow: hidden; } 
    #sidebar { width: 200px; float: left; }
    #content { width: 600px; float: right; }
    #subscript { display: inline; }
</style>

<div id="container">
    <div id="sidebar">
        <p>Left</p>
    </div>
    <div id="content">
        <p>Right</p>
        <div id="subscript">
            <p>Bottom</p>
        </div>
    </div>
 </div>

Answer 4

我不同意 Dominic Rodger 的观点：对于这么简单的事情，一个框架将是巨大的矫枉过正。当然，您应该有某种底层网格，但您不需要整个 960.gs、蓝图或任何其他只会用不必要的类污染您的标记的“框架”。

框架需要使用预定义的类名，如.grid_2、.grid_12 等，将您永远绑定到该布局。这种方式破坏了 HTML 和 CSS 的解耦：重新设计需要您同时更改样式表和标记，这很快就会失控。我一般不会推荐它。

您的要求非常基本，无需框架即可。基本上，您所要做的就是将另一个容器添加到您的标记中（此外，如果任何给定页面上只能存在这些元素中的一个，您应该使用 id 而不是 class）：

<div id="container">
  <div id="sidebar">
  </div><!-- #sidebar -->

  <div id="main">
    <div id="content">
    </div><!-- #content -->

    <div id="subscript">
    </div><!-- #subscript -->
  </div><!-- #main -->
</div><!-- #container -->

（我使用这些 cmets 能够将结束标签与其对应的标签匹配，随意省略它们。）

现在您所要做的就是根据您的需要浮动元素：

#container {
  overflow: hidden; /* don't collapse (floated children) */
  width: 960px; /* fixed width for entire site */
}

#sidebar {
  float: left; /* floating to the left in #container */
  height: 200px; /* fixed height */
  width: 320px; /* fixed width */
}

#main {
  float: right; /* floating to the right of #container */
  overflow: hidden; /* don't collapse (floated children) */
  width: 640px; /* width of #container - width of #sidebar */
}

#content {
  /* you shouldn't even need rules for this one */
}

#subscript {
  float: left; /* floated to be only as wide as needed for content */
}

divs 是块元素，因此除非它们是浮动的或具有固定宽度，否则它们会占用所有可用空间（请参阅#content）。

另一方面，现在浮动元素没有高度，因此它们的父容器只会折叠（即，您将无法用 #container { background: red } 的颜色填充空白区域。为了防止 @987654330 @ 从崩溃中，overflow: hidden 是必需的。

基本上，每次在页面上浮动元素时，其父容器都应该有overflow: hidden（请参阅#container 和#main）。

显然，您必须根据需要更改尺寸。