3 列：一列最大宽度，另外两列最小宽度答案

【问题标题】：3 columns: one with max-width, two others with min-width3 列：一列最大宽度，另外两列最小宽度
【发布时间】：2010-10-20 12:08:35
【问题描述】：

三列必须填满父容器的宽度。左右两列的宽度不得小于 150px。中心列的宽度不得大于 200 像素。

我制作了a reference page，它使用 JavaScript 进行布局。可以用纯 CSS 做同样的布局吗？

screenshot http://elv1s.ru/files/html+css/min-width_max-width_columns.png

它至少应该在 IE 8、Firefox 3.6、Chrome 7、Safari 5 和 Opera 10.63 中工作。

【问题讨论】：

这可能取决于您需要它与浏览器兼容的程度。
最新版本的 IE、Firefox、WebKit 和 Opera。

标签： html css layout

【解决方案1】：

Table-based solution @PanyaKor。

【讨论】：

【解决方案2】：

我不是专家，但我很确定如果答案是肯定的，那么它就在这个页面上：

Perfect multi-column CSS liquid layouts. iPhone compatible.

该页面（以及整个网站）非常棒 - 它向您展示了如何实现许多不同的布局（仅使用 CSS），并准确解释了它们的工作方式和原因。即使该页面不包含适合您的布局，该页面也很有可能让您大致了解需要采用的方法。

还有，祝你好运！

【讨论】：

这是一个不错的页面，但它似乎并没有涵盖我的最小宽度/最大宽度问题。

【解决方案3】：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#container { max-width:960px; width:100%; min-width:400px; overflow:auto;}
#aside { height:300px; width:40%; min-width:150px; float:left; background-color:grey; }
#primary { height:300px; width:20%; max-width:200px; float:left; background-color:red; }
#secondary { height:300px; width:40%; min-width:150px; float:right; background-color:grey; }
</style>
</head>
<body>
<div id="container">
    <div id="aside">Leftmost content</div>
    <div id="primary">Primary content</div>
    <div id="secondary">Secondary content</div>
</div>
</body>
</html>

关于此布局的几点说明：

我指定高度和背景仅用于显示目的。
溢出自动在包含元素上清除浮动；虽然您也可以使用更清晰的 div。
容器具有可变宽度，但最大为 960。我随意选择了这个数字，但最好在文本行变得太长之前将流体宽度最大化。
如果您保持容器流畅，如果视口变得足够小，布局将中断。编辑：我在容器中添加了 400px 的最小宽度，这应该可以解决问题。

另外，我想看看 http://www.alistapart.com/articles/holygrail/ 。虽然这是一篇详细介绍固定-流体-固定三列布局的文章，但如果您愿意的话，我认为您可以使用其中一些想法来改进我的布局。

【讨论】：

当我禁用 max-width:960px elv1s.ru/i/… 时，这不起作用。当#container 大于 1000px 宽度时，#aside 和 #secondary 仍然是 40% 宽度。在这种情况下，侧列的宽度应超过 40% 以适合#container。
@NV 因为中间列的最大宽度为 200px 并设置为容器的 20%，当 20% 的容器超过 200px 时，布局停止扩展。您可以通过将容器的背景设置为与中间列相同来屏蔽此效果。但是，我无法想象有很多场景需要针对大于 1000 的视口进行优化。