如何在父元素中将div与底部对齐

时间：2016-06-09 03:02:07

标签： html css zurb-foundation

我使用基础框架来创建网站，我在将div类容器与父容器底部对齐时遇到了一些麻烦。

这是问题的照片。

Image 1

注意第一张图片，所有内容都正确对齐。另一方面，<div>内容的第二个图像是远离的。我在css中设置为bottom:0;，但它无效。

这是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的高度。

2 个答案:

答案 0 :(得分：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

答案 1 :(得分：0)

而不是试图＆＃34;停靠＆＃34;使用绝对位置的底部面板可能会破坏您的应用程序的移动响应能力，为什么不构建您的HTML以更好地支持您尝试完成的任务。你也会以这种简单的css结束。

例如，您似乎试图完成此任务：

＆＃13;
＆＃13; 
.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;}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题