Question

我想开发4列布局（除了使用页面的完整可用宽度的mastead和footer），使得最右边的列固定为200px而其他列是流体的，最小宽度= 960px和最大值-width = 1216px。

所以这意味着只要浏览器窗口大于960且宽度小于1216像素，布局就像液体布局一样。浏览器窗口大于1216后，它将作为固定布局，宽度= 1216px，页面以浏览器视口为中心。如果浏览器窗口缩小到小于960px，则会出现底部的水平滚动条，因为最小宽度为960px。

我喜欢开发网站布局的网格系统（例如http://960.gs/）。

我网页上的文档类型为<!DOCTYPE html>（又名html5 doctype）

该解决方案适用于IE 6 7 8 9和FF，Safari，Chrome，Opera。

希望这能说明我在寻找什么。

根据上面给出的条件，这个问题的解决方案是什么？

我研究了谷歌但找不到任何解决方案。我遇到了像3列一样的最大宽度但没有网格系统的解决方案，看起来太笨拙了。

稍后我必须添加对小屏幕（移动设备）的支持，这需要设置一些列来显示：none并使用媒体查询将其他列堆叠在一起，但首先我需要解决上述问题。< / p>

Answer 1

我在IE7 / 8以及Chrome，Firefox，Opera，Safari的最新版本中进行了测试。

由于min-width和max-width，这在IE6中不起作用（如@meagar所说） - 网上有大量资源详细介绍黑客可以解决这个问题。除非我的其余代码对你而言是正确的，否则我不会花费精力去做这件事。另外，我对使用CSS网格系统毫无兴趣。

Live Demo（更高右列）
Live Demo（较高的流体列）

<强> HTML：

<div id="container">
    <div id="header">header</div>
    <div id="fluidColumnContainer">
        <div class="column">column 1</div>
        <div class="column">column 2</div>
        <div class="column">column 3</div>
    </div>
    <div id="fixedColumn">i'm 200px wide!<br />o<br />o<br />o<br />o</div>
    <div id="footer">footer</div>
</div>

<强> CSS：

html, body {
    margin: 0;
    padding: 0;
    border: 0
}
#container {
    margin: 0 auto;
    min-width: 960px;
    max-width: 1216px;
    overflow: auto
}
#fluidColumnContainer {
    padding: 0 200px 0 0
}
#fixedColumn {
    width: 200px;
    float: right
}
.column {
    float: left;
    width: 33%
}
#header {
    height: 90px
}
#footer {
    height: 90px;
    clear: both
}

使用基于网格的设计的最大宽度和最小宽度的弹性布局

1 个答案: