css - 三列使用 div 问题

我已经尝试了一段时间了。我正在尝试的是使用 div 的 3 列布局，如下所示:

标题正文 - 3 列(左、中、右) 页脚

我使用的示例:

HTML:

<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="header">
    <h1>Header</h1>
</div>
<div id="left">
    Port side text...
</div>
<div id="right">
    Starboard side text...
</div>
<div id="middle">
    Middle column text...
</div>
<div id="footer">
    Footer text...
</div>
</body>

CSS:

body {
    margin: 0px;
    padding: 0px;
}
div#header {
    clear: both;
    height: 50px;
    background-color: aqua;
    padding: 1px;
}
div#left {
    float: left;
    width: 150px;
    background-color: red;
}
div#right {
    float: right;
    width: 150px;
    background-color: green;
}
div#middle {
    padding: 0px 160px 5px 160px;
    margin: 0px;
    background-color: silver;
}
div#footer {
    clear: both;
    background-color: yellow;
}

我面临的问题是，每当我调整窗口大小时，div 开始缩小 - 我不想发生这种情况。

我想要类似 http://www.w3schools.com/ 的布局当我调整窗口大小时，div 不会缩小但不会显示其他列。

感谢任何帮助。

最佳答案

设置min-width停止元素收缩的属性。

关于css - 三列使用 div 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6184031/