1

我一直在开发一个外观现代的新网站。我想在一个内容 div 中有两列。然而，经过数小时的试验和错误，我在网上找到了各种代码，但我无济于事。我的 HTML 如下所示：

<!DOCTYPE html>
<html>
    <head>
        <title>Unnamed Website</title>
        <link rel="stylesheet" href="../_css/websitename.css" type="text/css">
    </head>
    <body>
        <div id="wrap">
            <div id="header">
                <div id="logo">
                </div>
                <div id="nav">
                    <ul>
                    </ul>
                </div>
            </div>
            <div id="content">
                <h2>Header Level Two</h2>
                <div id="columnleft">
                    Hello
                </div>
                <div id="columnright">
                    Hello
                </div>
            </div>
            <div id="footer">
                <p>Copyright &copy; 2013 BlahBlahBlah.com</p>
            </div>
        </div>
    </body>
</html>

老实说，我认为 HTML 没有任何问题。然而，CSS 是令人困惑的地方：

body{
    background-color:#333333;
    font-family:Helvetica;
}
div#wrap{
    width:1000px;
    height:auto;
    margin-top:20px;
    margin-right:auto;
    margin-left:auto;
}
div#header{
    width:980px;
    height:130px;
    margin-top:10px;
    margin-right:auto;
    margin-left:auto;
}
div#content{
    background-color:#ffffff;
    border-color:#ffffff;
    border-width:1px;
    border-style:solid;
    border-top-left-radius:5px;
    -moz-border-top-left-radius:5px;
    -webkit-border-top-left-radius:5px;
    -o-border-top-left-radius:5px;
    border-top-right-radius:5px;
    -moz-border-top-right-radius:5px;
    -webkit-border-top-right-radius:5px;
    -o-border-top-right-radius:5px;
    width:950px;
    height:auto;
    margin-right:auto;
    margin-left:auto;
    padding:0 15px;
}
div#footer{
    background-color:#eeeeee;
    border-color:#eeeeee;
    border-width:1px;
    border-style:solid;
    border-bottom-left-radius:5px;
    -moz-border-bottom-left-radius:5px;
    -webkit-border-bottom-left-radius:5px;
    -o-border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
    -moz-border-bottom-right-radius:5px;
    -webkit-border-bottom-right-radius:5px;
    -o-border-bottom-right-radius:5px;
    width:980px;
    height:40px;
    margin-bottom:10px;
    margin-right:auto;
    margin-left:auto;
    box-shadow:5px 2px 10px #333333;
    clear:both;
}
#footer p{
    text-align:center;
    font-family:Helvetica;
    font-size:13;
    line-height:7px;
}
h2{
    background-color:#35586c;
    font-family:Helvetica;
    font-weight:bold;
    margin:15px auto;
    padding:10px;
    border-width:1px;
    border-color:#0b0b5b;
    border-style:solid;
    border-radius:5px;
    -o-border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    text-align:center;
    box-shadow:0 0 1px #ffffff inset;
    -webkit-box-shadow:0 0 1px #ffffff inset;
    -moz-box-shadow:0 0 1px #ffffff inset;
    -o-box-shadow:0 0 1px #ffffff inset;
    text-shadow:1px 0 2px #222222;
    color:#fbfffb;
}
div#columnleft{
    width:200px;
    height:auto;
    background-color:#35586c;
    font-family:Helvetica;
    font-weight:bold;
    margin-top:15px;
    margin-bottom:15px;
    margin-right:15px;
    padding:10px;
    border-width:1px;
    border-color:#0b0b5b;
    border-style:solid;
    border-radius:5px;
    -o-border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    text-align:center;
    box-shadow:0 0 1px #ffffff inset;
    -webkit-box-shadow:0 0 1px #ffffff inset;
    -moz-box-shadow:0 0 1px #ffffff inset;
    -o-box-shadow:0 0 1px #ffffff inset;
    text-shadow:1px 0 2px #222222;
    color:#fbfffb;
    float:left;
}
div#columnright{
    width:710px;
    height:auto;
    background-color:#ffffff;
    font-family:Helvetica;
    margin-top:15px;
    margin-bottom:15px;
    float:right;
    text-align:justify;
}

每当我加载页面时，maincontent div 都不会随着其中的 column-divs 展开。我想尽可能远离表格，以便我可以对每一列进行更好的自定义，并且我不想使用标签。有什么办法可以解决这个问题吗？

4

1 回答 1

1

给你的#content div class="clearfix"

像这样的css

.clearfix:before,
    .clearfix:after {
      content: ".";
      display: block;
      height: 0;
      overflow: hidden;
    }

    .clearfix:after {
        clear: both;
    }

    .clearfix {
        zoom: 1; /* IE < 8 */
    }

这是一个工作示例

http://jsfiddle.net/delueg/u8zvV/

它表现得这样的原因是，每当你浮动元素时......父容器失去了与其子容器相对应的扩展能力......这就是 clearfix 的用途......换句话说，它会清除浮动......

于 2013-06-08T21:40:27.347 回答