一部のDIVが浮いている別のものをカットしています

WordPressでページテンプレートを使っています（問題ではありません）。私は私のpromelmのポイントを表現するために絵を挿入しようとします。一部のDIVが浮いている別のものをカットしています

http://img651.imageshack.us/img651/9017/picmic.png

LEFT-DIVはCONTENT-DIVの子であり、フロートがあります左。どちらも同じ背景色です。 CONTENT-DIVは、任意の場所に別の子NOTE-DIVを持つことができます。それはLEFT-DIVから正しいことができます、それは以下にすることができます。だから私は確かにその幅を知らない。また、CONTENT-DIV内にはいくつかのNOTE-DIVが存在することがあります。問題は、NOTE-DIVに別の背景色があり、LEFT-DIVをカット（オーバーラップ）していることです。

これを避けることは可能ですか？

私のコードは次のようになります。ここでは

<div id="content" style="background:#FFF;"> 
    <div id="left-div" style="float:left; width:200px; height:700px; min-height: 700px; margin-right:20px;"></div> 
    <p>...Content...</p> 
    <div class="some-note" style="background:aqua;">Text of note</div> 
    <p>...Content...</p> 
    <p>...Content...</p> 
    <p>...Content...</p> 
</div>

が本当の例です。 http://jsbin.com/iqerug/4/edit#preview

出典

2012-03-19 user1063113

uは '幅= "100％"'にそのボックスを設定してみてくださいでした？ – rackemup420

あなたはあなたのcss – Kaushtuv

を投稿できますか？これからhtmlとcssを投稿できますか？それはあなたが知っているだけでは不十分だと述べている – Joseph

うのように、このようなものが良いこと、あなたが最初のフロートをクリアすることを確認してください： http://jsbin.com/isawoz/3

<head> 
    <style> 
    article, aside, figure, footer, header, hgroup, 
    menu, nav, section { display: block; } 
    #left-div{ float:left; width:150px; height:200px; margin:20px; border:1px solid black; } 
    #content{ background:yellow; width:600px;height:500px;border:1px solid black;margin:10px; z-index:-1; } 
    .some-note { background:aqua; /*float:left; */z-index:1; } 
    </style> 
</head><body> 
    <div id="content"> 
    <div id="left-div"><img src="http://i.imgur.com/aSS3G.png" width="150px" height="200px" /></div> 
    <p>...Content...</p> 
    <div class="some-note">Text of note</div> 
    <p>...Content...</p> 
    <p>...Content...</p> 
    <p>...Content...</p> 
    <p>...Content...</p> 
    <p>...Content...</p> 
    <p>...Content...</p> 
    <div class="some-note">Text of note</div> 
    <p>...Content...</p> 
    <p>...Content...</p> 
    <p>...Content...</p> 
    <p>...Content...</p> 
    </div> 
</body>

あなたが重なるようにテキストが必要な場合は、Zインデックスの別の組み合わせを使用します。

出典

2012-03-19 22:50:06 hjpotter92

これは完全な解決策ではありません。私が言ったように、NOTE-DIVは境界線と境界線半径を持つことができるからです。しかし、もっと良いことがなければ、私はあなたのアドバイスをz-インデックスで使用します。 – user1063113

は、あなたの左のdivに背景色を追加し、重要な

#left-div{ 
float:left; 
width:200px; 
height:700px; 
min-height:700px; 
margin-right:20px; 
background:#fff !important; 
}

としてそれを作りますここに例があります： http://jsfiddle.net/pvrxG/5/

出典

2012-03-19 22:24:54 Kaushtuv

LEFT-DIVにmargin-rightがあり、NOTE-DIVにborderとborder-radiusがある場合はどうなりますか？ – user1063113

私はあなたが何を意味するのかを理解しています、あなたはここに何かを見つけるかもしれません：http://stackoverflow.com/questions/343313/css-set-width-to-fill-of-remaining-area – Kaushtuv

＃left-divは＃note-divの前に閉じます。これを試してみてください：

<div id="content" style="background:#FFF;"> 
    <div id="left-div" style="float:left; width:200px; height:700px; min-height: 700px; margin-right:20px;"> 
     <p>...Content...</p> 
     <div class="some-note" style="background:aqua;">Text of note</div> 
    </div> 
    <p>...Content...</p> 
    <p>...Content...</p> 
    <p>...Content...</p> 
</div>

あなたはノートdivの左側のdivの外側を追加したい場合は、

<div id="content" style="background:#FFF;"> 
    <div id="left-div" style="float:left; width:200px; height:700px; min-height: 700px; margin-right:20px;"> 
     <p>...Content...</p> 
     <div class="some-note" style="background:aqua;">Text of note</div> 
    </div> 
    <p>...Content...</p> 
    <p>...Content...</p> 
    <p>...Content...</p> 
    <div class="some-note" style="background:aqua; clear:both">Text of new note</div> 
</div>

出典

2012-03-19 22:28:36 huzzah

2番目のケースでは、SOME-DIVは常に – user1063113

私はLEFT-DIV以下を意味します – user1063113

「あるノート」には最大幅を設定できます。これは、例のような明示的なピクセル測定や、それらを実装する必要があるページベースの幅の場合には簡単です。

.some-note { 
background:aqua;max-width:420px/*that's 600px parent - 150px left div - 20px margin*/;float:left;margin:10px 0;}

jsbin：http://jsbin.com/iqerug/6/edit#preview

出典

2012-03-19 23:32:17

一部のDIVが浮いている別のものをカットしています

答えて

関連する問題