爲什麼這些Divs重疊？

這是沒有意義的我。我一直在研究這個，但我不知道它爲什麼重疊。我有一種感覺，那是因爲我使用了「IMG」標籤或因爲我需要的地方使用某種位置的類型，但我已經試過他們並沒有奏效。爲什麼這些Divs重疊？

#picdiv { 
height:405px; 
width:320px; 
border:1px solid black; 
margin:15px; 
    float:left; 
} 

#rightdiv { 
width:620px; 
height:320px; 
border:1px solid black; 

}  

<div id="picdiv"> 
<center><img src="img.png" /></center> 
<div id="quote"> 
"Here's Some Inspirational Text Like OMG!" 
</div> <!-- end quote --> 
</div> <!-- end pic container --> 

<div id="rightdiv"> 
"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." 
</div>

我更新了它，但仍無法得到它的工作：http://jsfiddle.net/FhU3r/15/

來源

2012-07-01 king

關於你的編輯，它適用於我，但第二個盒子非常寬。當我將寬度更改爲適合我的屏幕時，它適用於我：http://jsfiddle.net/FhU3r/20/ – Phil

如果我明白你想要做什麼，我會添加float: left到#rightdiv。

這將使段落出現在圖像和標題的一側。當然，如果在父容器中沒有足夠的寬度，它會換行到下一行，因此這是需要注意的地方。

來源

2012-07-01 04:34:07

有趣的，工作。但是，無論瀏覽器大小如何，它如何保持在哪裏？我只是試圖在jfiddle中做到這一點，但如果分辨率太小，它會將它撞到另一個div下面。我添加位置：固定，但它沒有工作：看到這裏：http://jsfiddle.net/FhU3r/11/嘗試改變底部框的寬度，你會看到它繼續下去，然後去側面時，足夠的空間 – king

用容器div再次更新了它，並且您的建議足夠大，但是不起作用：請看一下：http://jsfiddle.net/FhU3r/15/ – king

@sab - 容器不是很寬足夠（4個像素）。你必須加上寬度，邊距和邊框。看起來你沒有計算邊界。這個作品... http://jsfiddle.net/FhU3r/23/（我製作#picdiv 4像素更窄） –

浮動一個div需要它的「流」。所以你有點「浮動」在圖像上的div。如果你浮動圖像，它應該定位你想要的。

來源

2012-07-01 04:28:03 Naddiseo

應以何種方式浮動img？我漂浮了它，但隨後圖像因爲某種原因消失了 – king

由於您有一個浮動的div和另一個未浮動的div，浮動的div將從文檔的正常流程中取出。您可以通過添加float:right;到#rightdiv解決這個問題。

如果你想要一個顯示在左邊，另一個在右邊 - 從你的div的ID，這聽起來像你:) - 那麼你需要手動設置它們的寬度（px ，％，em - 無論你需要什麼），這樣它們就會在包含元素中水平放置。如果兩個浮動元素不能放在同一條線上，則第二個元素會「碰撞」到第二條線上。

另外，如果您有更多的內容，去這些div下面，你可能會想「清除」浮動的東西元素是這樣的：

<br style="clear:both" />

這將確保下面的任何元素不會重疊與漂浮的元素。我希望這有幫助！

來源

2012-07-01 04:33:56 Andrew

'
>>>'，我見過的東西的有趣選擇更頻繁。表面上我喜歡語義，但它是否也在下面添加一些空間？ – Phil

我明白了。所以我需要兩個容器。讓我試試 – king

我不明白。我試圖用一個包含div，但它仍然無法正常工作。我沒有得到爲什麼這不是現在工作，因爲我做過這樣的東西在過去，它的工作：http://jsfiddle.net/FhU3r/15/ – king

首先，注意你的的邊框重疊，但內容不對。

浮動屬性真的有兩個概念上不同的用途，我知道，即使技術實現是相同的。第一種是讓內容在元素周圍流動，第二種是在佈局中將元素放在一起。從我所看到的，你正在尋找第二個，但實現第一個。

讓我們先看看內容，讓內容在元素周圍流動。

說要發佈的文章。你有很多段文字，加上一些圖片可以插入整個身體。他們應該在一側，左側或右側「漂浮」，並且段落文本應該圍繞它們流動。而且，包含段落文本圖像周圍流動還應該包含圖像本身箱。這就是你在代碼中看到的。

Example

然後還有第二，要堅持彼此相鄰的事情佈局的目的。這似乎是你在追求的。

那麼，第一個目的的住宿使第二個目的使用花車有點醜陋。我不知道歷史，但如果我不得不猜測，我會說浮動規格是圍繞第一個目的設計的。

基本上你只需要浮動留下兩個元素，float: left;。然後右邊的那個不會繞過左邊的那個，而是存在於它自己的垂直列中。即使它比左邊的長，它只會擴展它的列，而不是在左邊的下面流動。

Example

一個這種方法的醜陋的方面是，你不能只是不小心把兩列下面的東西。如果你只是在另一段扔，它會環繞都浮動元素：

Example

因此，要解決這個問題，你需要添加clear: left，無論你想成爲兩個左浮動元素下方。

Example

有關此的權威來源，檢查出W3C specs。

This article也做了一個相當不錯的工作，解決與浮動的常見問題。

來源

2012-07-01 05:15:11 Phil

非常感謝你提供這個深度信息。 – king

爲什麼這些Divs重疊？

回答

相關問題