0
我有一個可變高度的div(只有一個圖像與最大寬度:100%和自動高度來調整其調整大小)。div下另一個絕對可變高度div
所以我想有一個文本覆蓋這個圖像分區的div ...好的。但後來我想有這個包裝下的其他股利圖像..
這裏的問題..我不知道div的高度(因爲它取決於調整大小的圖像高度),然後,當我嘗試繼續應該在這個包裝下的其他div時,下面的get stucker導致它的位置是絕對的!
<div id="wrap">
<div id="background">
<img src="http://i.imgur.com/hXtf2Dq.jpg" class="myImage" />
</div><!-- #wf_sliderItemBackground -->
<div id="mySubtitle">
dfdf
</div><!-- #background -->
</div><!-- #wrap -->
<div>
I CANT MAKE THIS DIV APPEAR UNDER THE IMAGE... I CANT USE DIMENSIONS SINCE I'M TRYING TO CREATE A RESPONSIVE LAYOUT AND USING HEIGHT IN PIXELS WOULD RUIN IT...
</div>
這裏是CSS:
* { margin:0; padding:0; }
#wrap {
width:100%;
display:table;
text-align:center;
}
#background {
width:100%;
max-width:100%;
position:absolute;
}
.myImage {
width: 100%;
max-width: 100%;
}
#mySubtitle {
margin:0 auto;
width:100%;
max-width:1200px;
background:green;
position:relative;
}
檢查fidddle:
但是這個解決方案的問題是: 當我嘗試調整大小時,較高的分辨率會覆蓋文本,較低的分辨率會在圖像和文本div之間顯示一個大的空白區域! :( – user3787036 2014-12-05 05:03:08
你可以使用媒體查詢這個目標視口的寬度? – NoobEditor 2014-12-05 05:48:19