相對定位div重疊底部內容

我正在嘗試做一個移動第一響應式佈局。所以對我的HTML我有相對定位div重疊底部內容

First - Middle Content 
Then - Left Content 
Then - Right Content

和以下所有的內容，我有一個單獨的信息部分，從左到右全寬。

我使用position:absolute作爲中間位置，左側位置和右側位置div來定位它們。我的問題是，因爲主要的3 div絕對定位，單獨的部分低於主要內容和重疊。我怎樣才能解決這個問題？

我有一個工作小提琴here。

來源

2013-03-20 user1889007

請只使用'code formatting' ...代碼。 – Doorknob 2013-03-20 12:50:42

您是否嘗試過使用Twitter Bootstrap？在你面對它們之前，它解決了很多佈局問題！ – 2013-03-20 12:51:09

@StijnHaus：其實這個網站已經建成了。所以我試圖使用媒體查詢來改變佈局 – user1889007 2013-03-20 12:52:12

基本彩車例如：http://jsfiddle.net/UKKcq/11 基本顯示：inline-block的例子：http://jsfiddle.net/UKKcq/19/

有考慮在這裏公平的幾件事情：

首先，你會在第二個例子中注意到，從文本主要部分從所有3個div開始。這是因爲它們仍然是文檔流程的一部分，而當使用浮動文本時，文本並不是如此。

另外，在第二個例子中，我必須刪除div之間的所有間距/換行符，以阻止出現在它們之間的空間。這一切發生與內嵌塊上的時間，我用下面的jQuery的功能來修復它，以免毀了我的標記的整潔：

jQuery.fn.cleanWhitespace = function() { 
      textNodes = this.contents().filter(
       function() { return (this.nodeType == 3 && !/\S/.test(this.nodeValue)); }) 
       .remove(); 
      return this; 
     } 
})(); 

$('INSERTPARENTDIVHERE').cleanWhitespace();

此外，我不得不用vertical-align:top因爲默認情況下最短div（以這個案例的中心），與其他兩個divs的底部對齊。

最後一個考慮因素是inline-block這樣的佈局在用戶使用瀏覽器進行放大或者因爲任何原因而導致寬度，填充，邊框或邊距發生變化時都會出現折斷的趨勢。您可以對後面的因素有相對的控制權，但爲了確保在用戶放大時不會下降到下一行（這看起來確實很糟糕），我建議將white-space: nowrap;應用於父div以嘗試並防止出現這種情況。

來源

2013-03-21 10:34:49 Calvin

相對定位div重疊底部內容

回答

相關問題