Question

我想要一个包含以下布局的HTML页面。已经完成了编码，但输出似乎都混乱了。有人请指出错误。

我想要的设计摘要

主要div元素（容器）。
标题div，边距为自动且宽度为960px（标题）。
display_wrapper div .width-960px＆amp;汽车保证金。
左侧导航栏的div元素。（在display_wrapper内）
用于主要内容显示的div元素。（在display_wrapper＆amp; _left_navbar中除外）

HTML部分

 <div id="container">
        <div id="header">
            header 
        </div>
        <div id="display_wrapper">
            <div id="_left_navbar">
                _left_navbar div
            </div>
            <div id="dynamic_content">
                dynamic content div
            </div>
        </div>
    </div>

CSS PART

#container{border:1px solid black;width:100%}
#header{width:500px;margin:0 auto;border:1px solid black;height:60px;}
#display_wrapper{width:500px;margin:0 auto;border:1px solid red;}
#_left_navbar{width:100px;height:200px;float:left;border:1px solid black;}
#dynamic_content{width:100%;height:200px;float:right;border:1px solid green;}

http://jsfiddle.net/jLNLq/

为什么_left_navbar和动态显示div出现在display_wrapper之外。它与不使用clear有关。（查看jsfiddle链接）

请告诉我我的错误以及如何纠正错误。

Answer 1

刚刚从width:100%

中删除了float:right和#dynamic_content

http://jsfiddle.net/jLNLq/6/

<强>更新

试试这个：

http://jsfiddle.net/jLNLq/7/

搞砸了html布局

1 个答案: