如何将div对齐到父元素的底部

我正在使用基础框架来创建网站，我在将父类容器的底部对齐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>。

来源

2016-06-09 Terrell Anderson

<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

来源

2016-06-09 03:39:40

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

快乐编码:) –

这实际上没有帮助第二行:( –

相反底部使用绝对位置可能会导致应用程序无法响应移动应用程序，为什么不构建您的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>

来源

2016-06-09 06:53:19 Aries

如何将div对齐到父元素的底部

回答

相关问题