Question

我有以下HTML布局

<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css">
            body {
                margin:10px 0px 0px 0px;
                font-size: 11px;
                font-family: Arial,Tahoma, sans-serif;
                background: #fff;
                color: #444;
            }

            h1 {
                font-size:1.5em;
                font-weight: bold;
            }


            #container { 
                width: 920px;
                margin: 0 auto;
                background-color: red
            }

            #header {
                border: 2px solid #ccc;
                height: 80px;
            }

            #content{
                display: block;
                width: 100%
            }

            #left {
                clear: left;
                float: left;
                width: 660px;
                border: 2px solid #ccc;
                margin:0 0 10px 0;
                padding:20px;
            }

            #right {
                position: relative;
                margin: 0 5px 0 5px;
                padding: 5px 0px 0px 0px;
                float: right;
                width: 200px;
                border: 2px solid #ccc;
            }

            #footer {
                clear: both;
                border: 2px solid #ccc;
                padding: 10px 0 20px 0;
                margin: 20px 0 0 0;
                font-size: .9em;
                color: #9b9b9b;
                width: 100%;
                background-color: skyblue;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="header" >
                <h1>Header</h1>
            </div>
            <div id="content">
                <div id="left">
                    <h1>Left</h1>
                </div>

                <div id="right">
                    <h1>Right</h1>
                </div>
            </div>
        </div>
        <div id="footer">
            <h1>Footer</h1>
        </div>
    </body>
</html>

我的问题是#container没有#left＆amp; #right内容，它只包含#header

请参阅附图，了解我的目标布局。

Actual and intended results

Answer 1

您可以在容器的末尾添加一个“clear：both”的空元素：

<div id="container">
  <div id="header" >
    <h1>Header</h1>
  </div>
  <div id="content">
    <div id="left">
      <h1>Left</h1>
    </div>
    <div id="right">
      <h1>Right</h1>
    </div>
    <div style="clear:both">&nbsp;</div>
  </div>
</div>

Answer 2

通过使用overflow: hidden;属性

，我能够达到预期的效果

#container { 
      width: 920px;
      margin: 0 auto;
      background-color: red;
      overflow: hidden;
}

Answer 3

使用clearfix解决方案，即

common un-obtrusive clearfix solution

HTML - DIV的CSS问题

3 个答案: