某些DIV正在切割另一個正在浮動的左邊

我正在使用WordPress中的頁面模板（無所謂）。我會嘗試插入一張圖片來表達我的promlem的觀點。某些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有另一種背景色，並且裁切（重疊）了左邊的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

沒有ü嘗試該框設置爲'WIDTH = 「100％」'？ – rackemup420 2012-03-19 21:59:48

你可以發佈你的css – Kaushtuv 2012-03-19 22:00:32

你能發佈html和css嗎？描述這是不夠的，你知道。 – Joseph 2012-03-19 22:01:26

會是這樣的好：試試這個： 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-index組合。

來源

2012-03-19 22:50:06 hjpotter92

這不是完美的解決方案，因爲正如我所說的，NOTE-DIV可以有邊界和邊界半徑。但是，如果沒有更好的東西，我會用z-indexes的建議。 – user1063113 2012-03-19 23:40:02

添加背景顏色，以你的左邊，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

如果左DIV有右邊界，NOTE-DIV有邊界和邊界半徑？ – user1063113 2012-03-19 22:45:34

我忽略了你的意思，你可能會在這裏找到一些東西：http://stackoverflow.com/questions/343313/css-set-width-to-fill-of-remaining-area – Kaushtuv 2012-03-19 23:07:29

您的＃left-div在＃note-div前關閉。如果你想添加的左格的音符DIV OUTSIDE

<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 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

第二種情況SOME-DIV將永遠低於 – user1063113 2012-03-19 22:40:04

我的意思是低於LIVT-DIV – user1063113 2012-03-19 22:41:06

您可以在「某些筆記」上設置最大寬度;這將是明確的像素測量，就像在你的例子中一樣簡單，或者如果你實現它們，基於基於百分比的寬度。

.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正在切割另一個正在浮動的左邊

回答

相關問題