0

埋め込まれた div# の周りに背景を配置するのに苦労しています..私が見逃した小さなものになると思います-何かアイデアはありますか?

青い div 境界線は、div#wrapper のコードを変更しているときに列がどこにあるかを示すためにちょうどそこにあります (並べ替えると背景画像になります)。

ここのコード: http://jsfiddle.net/SparrowWoods/rREAh/689/

<div id="wrapper">
<div id="mainContent">
    <h2>A Start</h2>
                <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
                <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
                <h2>A Start</h2>
                <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
                <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
</div><!--end main column-->
<div id="sideContent">
    <h2>A Start</h2>
                <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
                <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
</div><!--end right column-->
</div><!--end content-->
#wrapper{
    background-color:green;
    height:auto;
    width:100%;
    padding:5%;
    margin-left:10%;
    margin-right:10%;
    position:relative;
}
#mainContent {
    border: 1px solid blue;
    float: left;
    width: 60%;
    height: auto;
    padding:5%;
}
#sideContent {
    border: 1px solid blue;
    float: left;
    width: 25%;
    height: 100%;
    padding:2%;
}
4

3 に答える 3

0

背景が内部の div を覆わない理由は、それらが浮かんでいるためです。これにはいくつかの解決策があります。それらのうちの2つです。

  1. コンテナ div(#wrapper) に固定の高さを設定します
  2. すべてのフロートフィドルをクリアする #maincontent と #sideContent の下に div を追加しますclear:both
于 2013-06-10T15:00:26.363 に答える
0

この場合、最も簡単な解決策は、列の下にフロートを使用することです。

<br style="clear:both;padding:0">

あなたが抱えている問題はfloat:left、列を隣り合わせに配置するために使用していることです。このため、それらはフロー レイアウトから取り出され、ブラウザーに関する限り、実質的に親を空にします。これが、パディングの色付けだけを見た理由です。

別の方法として、 を使用して列を隣り合わせに配置するdisplay:inline-blockこともできますが、その間に空白が表示されるという他の問題が発生する可能性があります。

于 2013-06-10T14:54:49.620 に答える