Question

我正在尝试创建一个三列页面。我的目的是有两个主要部分：

左手部分（将分为两列）
右手部分（这将只有一列）

第1列和第2列正确向左浮动并排并排。但是，我已经尝试了几乎所有内容，第3列ALWAYS显示在第1列和第2列

下

这就是我的简化HTML的样子：

<html>
    <head>
       <style type="text/css">
          body { width: 1200px; }
          .spacer { clear: both; height: 1px; }
          #lhs-section, #rhs-section { float: left; }
          #col1, #col2, #col3 { float: left; min-height: 400px; padding-right: 5px; border: 1px solid #abc; width: 350px; }
       </style>
    </head>
    <body>
        <div>
            <div id="lhs-section">
                <div id="col1"></div>
                <div id="col2"></div>
                <div class="spacer"></div>
            </div>
            <div id="rhs-section">
                <div id="col3"></div>
                <div class="spacer"></div>
            </div>
            <div class="spacer"></div>
        </div>
    </body>
</html>

我做错了什么？

Answer 1

id names和css中html的平均问题不同在markup #lhs-section中。您在css＆amp;中写下#rhs-section，<div id="lhs_section">的原因<div id="rhs_section"> <div id="lhs-section"> <div id="col1"></div> <div id="col2"></div> <div class="spacer"></div> </div> <div id="rhs-section"> <div id="col3"></div> <div class="spacer"></div> </div> <div class="spacer"></div> </div> 在你的HTML中。

所以，写这样：

{{1}}

选中此http://jsfiddle.net/aU5y8/

Answer 2

只需删除lhs_section

中的<div class="spacer"></div>即可

 <html>
    <head>
       <style type="text/css">
          .spacer { clear: both; height: 1px; }
          #lhs_section, #rhs_section { float: left; }
          #col1, #col2, #col3 { float: left; min-height: 400px; padding-right: 5px; border: 1px solid #abc; width: 350px; }
       </style>
    </head>
    <body>
        <div>
            <div id="lhs_section">
                <div id="col1"></div>
                <div id="col2"></div>
            </div>
            <div id="rhs_section">
                <div id="col3"></div>
            </div>
        </div>
    </body>
</html>

Answer 3

删除col1和col2后的spacer div

这是一个指向更正代码的jsfiddle链接：

http://jsfiddle.net/mwESj/

嵌套的div和浮点数不起作用

3 个答案: