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上没有明确width的{{1}}。然后，您需要在容器结束前的新元素上显式.subscript，或者，如果您不想更改标记，则需要clear: left上的自清除黑客（例如dhabersack提到的.container hack;如果需要IE6支持，请检查hasLayout修复程序。）

Answer 2

这似乎可以毫不费力地使用960.gs或其他CSS网格而不会太麻烦地实现。

你可以免费获得空白，所以我们会忽略这些。

您需要修复侧边栏的宽度，并且需要具有灵活的高度，因此您只需要一个宽度为“单元格”（例如24列中的9个）。然后内容采用剩余的（例如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

我不赞同多米尼克罗杰：一个框架对于那些简单的事情来说会是一种巨大的过度杀伤力。当然，你应该有一些底层网格，但你不需要整个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 -->

（我使用这些评论可以将结束标记与其对应标记匹配，随意省略它们。）

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

#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 */
}

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

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

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

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

CSS中令人惊讶的高级布局

4 个答案: