Question

我需要固定尺寸侧边栏和流体内容区域的CSS布局。问题是，这种格式的大多数css布局都使用float来定位侧边栏。因此，我不能在内容区域内使用明确的内容。

查看附带的html。内容区域在浮动时跳到导航内容的底部。

我需要这种类型的css布局的解决方案，它仍允许我在内容区域内使用浮动/清除。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <style type="text/css" media="screen">
        body {
            margin: 0;
            padding: 0;
        }

        #nav {
            float: left;
            width: 160px;
        }

        #content {
            margin: 0 0 0 200px;
            background-color: green;
        }       
</style>
</head>
<body>
<div>

    <div id="nav">

        This is the nav content<br/>
        This is the nav content<br/>
        This is the nav content<br/>
        This is the nav content<br/>
        This is the nav content<br/>
        This is the nav content<br/>
        This is the nav content<br/>
        This is the nav content<br/>
        This is the nav content<br/>
        This is the nav content<br/>
        This is the nav content<br/>
        This is the nav content<br/>
        This is the nav content<br/>
        This is the nav content<br/>
        This is the nav content<br/>

    </div>
    <div id="content">

        This is the main content<br/>
        This is the main content<br/>
        This is the main content<br/>
        This is the main content<br/>


        <div style="padding: 10px; float: left; width: 100px; background-color: yellow;">Left</div>
        <div style="padding: 10px; float: right; width: 100px; background-color: orange;">Right</div>

        <div style="clear: both;"> </div>

        (This shouldn't be way down here) This is the main content<br/>
        This is the main content<br/>
        This is the main content<br/>
        This is the main content<br/>

    </div>
</div>
</body>
</html>

Answer 1

我将#nav改为“float：left;”到“位置：绝对;”。那会做你想做的吗？

Answer 2

试试这个： http://matthewjamestaylor.com/blog/perfect-2-column-left-menu.htm

它适用于跨浏览器工作的不同数字列布局，并允许您在两列中使用浮动和清除。还有修复具有全长列背景颜色。它也是SEO友好的，因为“主”列在html中排在第一位，而不是在左栏之后，左栏通常具有不重要的信息作为中心内容。

布局问题：固定尺寸的侧边栏，带有流体含量＆amp;明确

2 个答案: