2016-06-09 80 views
0

我正在使用基礎框架來創建網站,我在將父類容器的底部對齊div類容器時遇到了一些問題。如何將div對齊到父元素的底部

這是問題的照片。

Image 1

注意到的第一形象,一切都正確對齊。另一方面,第二個圖像<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>  

這裏就是我試圖完成。

Image 2

沒有任何人有一個解決方案,爲什麼底部的HTML代碼拉伸是遠遠超出了父div的高度的第二部分對準<div>

回答

0
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title></title> 
    <link rel="stylesheet" href="style.css"> 
    <script data-require="jquery" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
    <script src="script.js"></script> 
    <style> 
    </style> 
    </head> 
    <body> 
    <div class="row container-home"> 
     <div class="row column newclass"> 
     <div class="medium-6 column bottomdiv" style=""> 
      <img src="http://cdn.ratedrnb.com/2016/06/mario2.png" class="img1"> 
      <div class="medium-4 column first-title-music"> 
      <h1 class="artist-title" style="">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 newclass2" style=""> 
      <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> 
    </body> 
</html> 

和CSS:

/*把你的CSS在這裏*/

h1 { 
    color: red; 
} 

.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: 100px; 
    position: absolute; 
    bottom: 0; 
    /* padding: 5% 0 0 3%; */ 
    clear: bottom; 
    top: 331px; 
} 

.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; 
    position: absolute; 
    bottom: 0; 
    /* padding: 5% 0 0 3%; */ 
    clear: bottom; 
    top: 135px; 
} 

.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; 
} 

.newclass { 
    position: relative; 
    padding: 15px 0 0 2%; 
    width: 100%; 
} 

.bottomdiv { 
    margin: 0px; 
    padding: 0; 
    float: left; 
    width: 100%; 
    max-width: 425px; 
} 

.artist-title, 
.song-title { 
    margin-left: 60px !important; 
} 

.newclass2 { 
    width: 100%; 
    max-width: 190px; 
    max-height: 190px; 
    margin: 0px; 
    padding: 0px; 
    float: left; 
    padding-left: 20px; 
} 

.artist-title-small, 
.song-title-small { 
    margin-left: 20px !important; 
} 

.img1 { 
    height: 425px; 
    width: 425px; 
} 

,並試圖 「停靠」 的小組爲參考鏈接https://plnkr.co/edit/52Ga8dT6wpTRklGDtvMX?p=preview

+0

哇....謝謝你的sooo多。 –

+0

快樂編碼:) –

+0

這實際上沒有幫助第二行:( –

0

相反底部使用絕對位置可能會導致應用程序無法響應移動應用程序,爲什麼不構建您的html以更好地支持您要完成的任務。你也會以這種簡單的方式結束。

例如,你似乎在試圖做到這一點:

.darkgray { background: #999;} 
 
.parent-panel {width: 600px; margin: auto; } 
 
.left-panel {float: left; width: 200px; height: 200px; margin: 10px;} 
 
.right-panel {float: left; width: calc(100% - 220px);} 
 
.right-child {float: left; width: calc(33.33% - 20px); height: 90px; margin: 10px;}
<div class="parent-panel"> 
 
    <div class="left-panel darkgray"></div> 
 
    <div class="right-panel"> 
 
    <div class="right-child darkgray"></div> 
 
    <div class="right-child darkgray"></div> 
 
    <div class="right-child darkgray"></div> 
 
    <div class="right-child darkgray"></div> 
 
    <div class="right-child darkgray"></div> 
 
    <div class="right-child darkgray"></div> 
 
    <div> 
 
</div>