我正在使用基礎框架來創建網站,我在將父類容器的底部對齊div
類容器時遇到了一些問題。如何將div對齊到父元素的底部
這是問題的照片。
注意到的第一形象,一切都正確對齊。另一方面,第二個圖像<div>
的內容是離開的。我已將它設置爲bottom:0;
在CSS中,但它不工作。
這裏是CSS:
.container-home {
max-width: 1175px;
background: #fff;
margin: 0 auto;
padding: 20px 0px 0 0px;
position: relative;
z-index: 1;
}
.first-title-music {
background: url('http://cdn.ratedrnb.com/2016/06/large-title.png');
width: 100%;
max-width: 425px;
height: 160px;
position: absolute;
bottom: 0;
padding: 5% 0 0 3%;
clear: bottom;
}
.artist-title {
color: #fff;
font-family: poppins;
font-weight: 700;
text-transform: uppercase;
font-size: 36px;
line-height: 22px;
}
.song-title {
color: #fff;
font-family: poppins;
font-weight: 300;
text-transform: uppercase;
font-size: 24px;
}
.big-play {
position: absolute;
top: 150px;
left: 170px;
}
.second-title-music {
background: url('http://cdn.ratedrnb.com/2016/06/small-title.png');
width: 100%;
max-width: 190px;
height: 70px;
position: absolute;
bottom: 0;
padding: 0;
}
.artist-title-small {
color: #fff;
font-family: poppins;
font-weight: 700;
text-transform: uppercase;
font-size: 18px;
line-height: 20px;
}
.song-title-small {
color: #fff;
font-family: poppins;
font-weight: 300;
text-transform: uppercase;
font-size: 14px;
}
.big-play {
position: absolute;
top: 150px;
left: 170px;
}
這裏是HTML:
<div class="row container-home">
<div class="row column" style="position:relative; padding:15px 0 0 2%;">
<div class="medium-6 column" style="max-width:425px; margin:0px; padding:0;">
<img src="http://cdn.ratedrnb.com/2016/06/mario2.png">
<div class="medium-4 column first-title-music">
<h1 class="artist-title">MARIO</h1>
<h1 class="song-title">I NEED MORE</h1>
</div>
<div class="large-12 column big-play">
<img src="http://cdn.ratedrnb.com/2016/06/big-play2.png">
</div>
</div>
<div class="medium-6 column" style="max-width:190px;max-height:190px; margin:0px; padding:0px; float:left;">
<img src="http://cdn.ratedrnb.com/2016/06/alicia2.png">
<div class="medium-4 column second-title-music">
<h1 class="artist-title-small">ALICIA KEYS</h1>
<h1 class="song-title-small">IN COMMON</h1>
</div>
</div>
</div>
</div>
這裏就是我試圖完成。
沒有任何人有一個解決方案,爲什麼底部的HTML代碼拉伸是遠遠超出了父div的高度的第二部分對準<div>
。
哇....謝謝你的sooo多。 –
快樂編碼:) –
這實際上沒有幫助第二行:( –