1

こんにちは、div タグについて質問があります。私はこのチュートリアルに従い、彼が行ったことを正確に実行し、異なる結果を得ました。私はこれについてグーグルで検索しましたが、答えが見つかりません。

問題は、チュートリアルと同じことを具体的に行ったにもかかわらず、content_wrapper div 内の div タグが content_wrapper div 内に配置されないことです。代わりに、div タグは私の content_wrapper div の一番下に配置されます。助けがあれば、現在dreamweaver CS5を使用しています。

これが私のdivの書き方でした：

<body>

    <div id="header"> This is my header </div>

    <div id="content_wrap"> 

        <div id="left_content"> Advertisement </div>

        <div id="right_content"> </div>

    </div>

</body>

これは私のCSSです：

#header{
    height:1000px;
    width:1000px;
    margin-left:auto;
    margin-right:auto;
    border:solid 1px;
}

#content_wrapper{
    height:800px;
    width:980px;
    margin-left:auto;
    margin-right:auto;
    margin-top:10px;
    }

#left_content {
    height:800px;
    width:240px;
    float:left;
    margin-left:auto;
    margin-right:auto;
    border:solid 1px;

}

#right_content {
    height:800px;
    width:730px;
    margin-left:10px;
    margin-right:auto;
    float:right;
    border:solid 1px;
    }
4

3 に答える 3

0

親div（ラッパー）をクリアしていないため、左右のdivが折りたたまれています。クラスを追加します<div id="content_wrap" class="clearfix">

.clearfix:after{
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  font-size: 0;
}
于 2013-02-08T22:24:08.790 に答える
0

divid"content_wrap"がCSS参照"content_wrapper"と一致しません

于 2013-02-08T22:24:57.877 に答える
0

質問のコメントに記載されている ID の不一致に加えて、いくつかの問題があります。

まず、右浮動要素が最初に来る必要があります。次に、フロート要素は、パディングとマージンを含めてラッパー要素の幅よりも小さい幅を持つ必要があります。そうしないと、新しい行にラップされます。

最後に、フロート要素に自動マージンは必要ないでしょう。あなたが何を求めていたのかわからないので、わかりません。

http://jsfiddle.net/z8Gwg/

#header {
    height:100px;
    width:100px;
    margin-left:auto;
    margin-right:auto;
    border:solid 1px;
}
#content_wrapper {
    height:80px;
    width:98px;
    margin-left:auto;
    margin-right:auto;
    margin-top:10px;
    background-color: #eee;
}
#left_content {
    height:80px;
    width:20px;
    float:left;
    border:solid 1px;
    overflow: hidden;
}
#right_content {
    height:80px;
    width:70px;
    float:right;
    border:solid 1px;
}

<body>
    <div id="header">This is my header</div>
    <div id="content_wrapper">
        <div id="right_content"></div>
        <div id="left_content">Advertisement</div>
    </div>
</body>
于 2013-02-08T22:29:58.897 に答える