將div放在另一個未知高度的div下

我有一個居中div，其高度取決於用戶屏幕分辨率（div1）。我想自動地（在中心再次）位置的第二DIV（DIV2）恰好在它之下，優選在不使用任一計算/ JavaScript或使用包裹臺的將div放在另一個未知高度的div下

<div id="div1" class="div1"></div> 
<div id="div2" class="div2"><input type=image src=bla.jpg></div>

CSS：

.div1 { 
    position: absolute; 
    overflow: hidden; 
    top: 10px; 
    left: 0px; 
    right: 0px; 
    width: 50%; 
    height: 65%; 
    min-width: 100px; 
    min-height: 200px; 
    max-width: 200px; 
    max-height: 300px; 
    background-color: red; 
    border: 1px solid #000000; 
    margin: 0 auto; 
} 

.div2 { 
    position: relative; 
    display: table; 
    overflow: hidden; 
    top: 200px; 
    border: 1px solid #000000; 
    padding: 0px; 
    margin: 0 auto; 
    background-color: yellow; 
    visibility: visible; 
}

不工作的jsfiddle：http://jsfiddle.net/Y4kga/ 黃色DIV應準確（觸摸）的紅格

PS下我使用顯示：表，因爲我有insite輸入類型=圖像，我希望寬度是一樣大的輸入類型。

我應該怎麼做？在此先感謝！

來源

2013-02-06 MIrrorMirror

你可以使用CSS的[Dead Center]（http://www.wpdfd.com/editorial/thebox/deadcentre4.html）來實現這個！ –

我不認爲你可以用絕對位置的第一個div自動實現這一點。你有沒有試過用最寬的寬度設置一個更大的div。這個更大的div可以擁有絕對的位置。 –

@Mark E如何包含div的寬度幫助？ – MIrrorMirror

從您的div1中刪除絕對定位並將其添加到包裝div。然後瀏覽器的佈局引擎可以照顧你的紅色div下方的黃色div。

<div class="wrapper"> 
    <div id="div1" class="div1"></div> 
    <div id="div2" class="div2">lol</div> 
</div>

由於div1不再絕對定位，所以可以使用自動邊距進行水平居中。

.div1 { 
margin: 0px auto; 
    margin-top: 10px; 
}

http://jsfiddle.net/Y4kga/3/

來源

2013-02-06 19:33:54

好了，不定位您的第一個div有絕對的 - >http://jsfiddle.net/tPJNg/1/

.div1 { 
    overflow: hidden; 
    width: 50%; 
    height: 65%; 
    min-width: 100px; 
    min-height: 200px; 
    max-width: 200px; 
    max-height: 300px; 
    background-color: red; 
    border: 1px solid #000000; 
    margin: 10px auto; 
    clear:both; 
} 

.div2 { 
    clear:both; 
    display: table; 
    overflow: hidden; 
    border: 1px solid #000000; 
    padding: 0px; 
    margin: 0 auto; 
    background-color: yellow; 
    visibility: visible; 
}

就是這樣。

來源

2013-02-06 19:39:38

將div放在另一個未知高度的div下

回答

相關問題