Question

三列必须填充父容器的宽度。左列和右列的宽度不得小于150像素。中间列的宽度不得超过200像素。

我已经使用JavaScript进行布局a reference page。是否可以使用纯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。

Answer 1

Table-based solution的{p> @PanyaKor。

Answer 2

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

Perfect multi-column CSS liquid layouts. iPhone compatible.

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

另外，祝你好运！

Answer 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/。虽然这篇文章详细介绍了固定流体固定的三柱布局，但我认为如果您愿意，可以使用一些想法来改进我的布局。

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

3 个答案: