Question

我不太熟悉CSS，想要创建一个包含3列的网站，其中左右宽度是固定的，而中心宽度是动态的。此外，该网站至少应与IE（版本6 +），Firefox，Chrome和Safari兼容。有什么帮助吗？

我目前的代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<style type="text/css">
<!--
#Content { width: 100%; height: 300px; }
div.left { float: left; width: 150px; }
div.middle { float: left; }
div.right { width: 150px; }
-->
</style>
</head>

<body>
<div id="Content">
    <div class="left">Left</div>
    <div class="middle">Middle</div>
    <div class="right">Right</div>
</div>
</body>
</html>

附加要求：即使浏览器尺寸太小，我希望中间和右边的div保持在同一行。

编辑：我找到了一个类似结构的网站： http://matthewjamestaylor.com/blog/perfect-3-column.htm

但是我希望左右两侧固定（150px）。有人可以帮忙吗？

Answer 1

你有一个流体主支架，然后有3列。然后你要做的是将中心元素上的边距设置为这些边上列的宽度。这是一个非常标准的网站模型。 Here是Dreamweaver为我自动生成的内容。

Answer 2

这样做吗？

<div style="position:absolute;margin-left:200px;margin-right:200px;">
    Awesome content
</div>
<div style="width:100%;height:100%;">
    <div style="float:left;width:200px;height:100%;background-color:#FF0000;"></div>
    <div style="float:right;width:200px;height:100%;background-color:#FF0000;"></div>
</div>

http://snuzzer.dk/pub/three_columns_fixed.html

上的示例

Answer 3

以下是Jsfiddle示例，

你可以做的一件事是在你的浮动元素之后添加一个空div并给它一个clear:both样式，以防止包含div崩溃。

Answer 4

折叠列的问题源于您没有为容器设置固定/最小宽度。在容器上使用min-width和max-width确保您的网站具有最小宽度，这将迫使浏览器添加水平滚动条（如果它太小）。您需要将最小宽度设置为至少两侧列的组合宽度，以确保它们不会折叠。

<style type="text/css">
#Content { min-width: 500px; max-width: 1000px; }
div.left { float: left; width: 150px; }
div.middle { float: left; }
div.right { float: right; width: 150px; }
</style>

如果您的目标是在IE 6中兼容（此时似乎几乎没有意义，考虑到网络上仍有不到2.5％的人仍然使用IE6 - http://www.w3schools.com/browsers/browsers_explorer.asp），请使用此技术：{{3 }}

CSS - 浮动，修复和动态宽度

4 个答案: