html - CSS惊人的高级布局

我有以下HTML结构：<div class="container"> <div class="sidebar"></div> <div class="content"></div> <div class="subscript"></div></div>我需要以下布局：┌─────────┬───────────────────────┐│ │ ││ sidebar │ content ││ │ ││ │ │├─────────┤ ││ │ ││ w ├─────────┬─────────────┤│ │subscript│ w │└─────────┴─────────┴─────────────┘w-是空格容器必须具有固定的宽度和灵活的高度（必须扩展以适合其容纳物）补充工具栏必须具有固定的宽度和高度，并在顶部对齐。内容必须在侧栏的右侧，并占用所有可用的水平空间。它必须是垂直可扩展的，以适合其文本下标必须位于内容的正下方，并与其左对齐。另外，必须水平扩展它以适合其文本（订阅）使用纯CSS怎么做？ 最佳答案 高级？几乎不。最简单的：/* 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的.subscript。然后，您可能需要在容器末尾之前在新元素上显式地使用clear: left，或者，如果您根本不想更改标记，则可以在.container上进行自我清除（例如 hack，如dhabersack所述；如果需要IE6支持，请检查hasLayout修复程序）。关于html - CSS惊人的高级布局，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/3131323/