12

左側にサイドバー、右側にコンテンツがある 2 列のレイアウトがあります。

そこで、サイドバーを左にフロートさせ、右のコンテンツに余白を与えます。万事順調で…

コンテンツの子要素にクリアが適用されるまで、サイドバーの下にジャンプします。

親コンテナ内でのみ子要素を浮き上がらせてクリアする方法はありますか?

画像は 1000 語に相当するため、JSFiddle を次に示します。

http://jsfiddle.net/qRYYm/1/

4

4 に答える 4

29

それに追加すれば、overflow:auto;あなた.contentは正しいと思うはずです。

于 2012-08-28T22:32:21.333 に答える
0

この方法でもできます。

.left{float:left;}
.right {float:right;}
.clear{clear:both;}

<div>
    <div class="left">SideBar</div>
    <div class="right">
             <div>
                 <div class="left">content 1</div>
                 <div class="left">content 2</div>
                 <div class="clear"></div>
             </div>
   </div>
    <div class="clear"></div>
</div>

任意の div に float を適用する場合は、それらを親 div に配置し、同じ親 div 内でクリアします

于 2012-08-30T13:43:46.280 に答える
0

これはどうですか:

aside{
    position: absolute;
    height: 300px;
    width: 100px;
}

http://jsfiddle.net/qRYYm/2/

于 2012-08-28T22:28:12.037 に答える
0

clear の使用は避けてください。メインコンテナでoverflow:hiddenを使用できます

<div class="content">
    <div class="one">One</div>
    <div class="two">Two</div>    
</div>

.content { float: left; overflow: hidden; width: 900px; }
aside { float: left; width: 100px; }

また、margin-left:100px を使用して、左側の列からコンテンツを押し出すべきではありません。両方とも左に浮かせます。列がメインラッパーにあるのが好きだと思います。その方が居心地がいい。

于 2012-08-28T22:37:16.393 に答える