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

时间:2011-05-14 09:02:36

标签: html css

我不太熟悉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)。有人可以帮忙吗?

4 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

这样做吗?

<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

上的示例

答案 2 :(得分:0)

以下是Jsfiddle示例,

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

答案 3 :(得分:0)

折叠列的问题源于您没有为容器设置固定/最小宽度。在容器上使用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 }}