1

モダンな外観の新しいウェブサイトに取り組んでいます。1 つのコンテンツ div 内に 2 つの列が必要でした。ただし、オンラインで見つけたさまざまなコードを使用して何時間も試行錯誤した後、役に立たなくなりました。私の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-div で展開されません。各列をより適切にカスタマイズできるように、テーブルからできるだけ離れたいと思います。また、タグを使用したくありません。これを修正する方法はありますか？

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 に答える