Question

我现在已经尝试了一段时间了。我正在尝试的是使用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不会缩小，而是显示其他列。

感谢任何帮助。

Answer 1

设置min-width属性以停止元素缩小。

Answer 2

我建议你将所有div包围在一个固定宽度或最小宽度设置的地方（正如别人建议的那样）。

三栏使用div问题

2 个答案: