居中在另一個居中的div內溢出它的父母的div

我有一個列的佈局，其中列是具有固定寬度的居中的div。我想在填充父母的列中放置更寬的div，但將其居於父母的中間。從概念上類似以下內容：居中在另一個居中的div內溢出它的父母的div

<div style="width: 100px; margin: 0 auto; overflow:visible;" id="parent"> 
    <div style="width: 400px; margin 0 auto;" id="child"></div> 
</div>

定心只要可以作爲孩子的div比其父更薄，但一旦變大，它總是留給家長出於某種原因一致。

來源

2010-10-18 Sam Gibson

我做了一個jsFiddle solution

當一個元素溢出他的父母，這是正常的行爲，它只是溢出的權利。例如，當您的站點比視口寬時，您不必向左滾動，而只能向右滾動。該解決方案基於絕對居中的div，具有負的左邊距（該值是他自己寬度的一半）。所以如果你知道這個元素的寬度，這個解決方案應該沒問題。

在FF 3.6測試，IE7和IE8

來源

2010-10-18 11:09:34

雖然我想將內部div視爲流動對象。在元素完全定位後，是否有辦法恢復正常流動模型？ – 2010-10-18 11:14:20

我已更新jsFiddle代碼：[點擊此處]（http://jsfiddle.net/4VrMv/3/）使用相對定位來保持流動（所以子元素的高度延伸父元素） – 2010-10-18 11:17:27

正是我在找的東西。謝謝。 – 2010-10-18 11:20:34

我不是100％肯定，但嘗試給父元素設置爲relative和兒童absolute的位置，然後爲孩子top，left和width/height性能DIV相應。

來源

2010-10-18 11:02:19 Sarfraz

絕對與它的定位是，它從正常流動模型中刪除和元素將在它出現的問題。是否有辦法在絕對定位的元素之後恢復正常流動模型？ – 2010-10-18 11:15:37

恢復正常流程的唯一方法是通過確保#wrapper高度與#child高度相同來模擬它。 – meustrus 2012-09-14 17:50:37

我製成賈斯特斯溶液a variation。我在內部元素中使用了50％的負邊距，而不是相對定位。

#wrapper { 
    margin: 0 auto; 
    padding: 10px 0 10px; 
    width: 200px; 
    background-color: #eee; 
} 
#child { 
    margin: 0 -50%; 
    width: 400px; 
    background-color: #ddd; 
}

這樣你就不需要事先知道元素的大小。

來源

2010-10-18 11:31:26

嗯這不適合我雖然。當我使用此代碼並使#child變小或變寬時，居中會出錯...... – 2010-10-18 12:41:21

這是我如何解決這個問題：

http://jsfiddle.net/WPuhU/1/

也要照顧的滾動條（如果你的窗外景色是那麼小四溢DIV它們不會出現）。自動中心溢出的div。

CSS：

#center-3 {height:40px;background-color: #999;} 
#center-1 {height:20px;top:10px;background-color: #aaa;} 

/* the necesary code */ 
body {width:100%;margin:0;} 
#center-4 { 
    width: 100%; 
    overflow:hidden; 
    /* remove the next 2 line for a normal flow */ 
    position: absolute; 
    z-index: -1; 
} 
#center-3 { 
    position: relative; 
    margin: 0 auto; 
    width: 200px; 
} 
#center-2, #center-1 { 
    position: relative; 
    width: 400px; 
} 
#center-2 { 
    left: 50%; 
} 
#center-1 { 
    left: -50%; 
}

HTML：

<div id="center-4"> 
    <div id="center-3"> 
     <div id="center-2"> 
      <div id="center-1"></div> 
     </div> 
    </div> 
</div> 
<div id="other-stuff">Here comes the other stuff above.</div>

來源

2013-06-08 17:27:29 Alqin

#parent { 
    position: relative; 
    width: 100px; 
    overflow: visible; 
} 

#child { 
    width: 400px; 
    position: absolute; 
    left: 50%; 
    transform: translateX(-50%); 
}

來源

2016-02-23 17:50:04 Ahmet

居中在另一個居中的div內溢出它的父母的div

回答

相關問題