堆棧內存溢出
  簡體   English   中英

如何將div與父元素的底部對齊

[英]How to align div to bottom in parent element

 原文  2016-06-09 03:02:07  0   2    html/ css/ zurb-foundation

問題描述

我正在使用基礎框架創建網站，但在將div類容器與父容器的底部對齊時遇到了一些麻煩。

這是問題的照片。

圖片1

注意第一個圖像，一切都正確對齊。 另一方面，第二張圖像<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>

這是我要完成的工作。

圖片2

有誰能解決為什么html代碼第二部分中底部對齊的<div>延伸得遠遠超出父div的高度的問題。

2 個解決方案

解決方案1
 0  2016-06-09 03:39:40

<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=預覽以供參考

解決方案2
 0  2016-06-09 06:53:19

與其嘗試使用絕對位置將面板“停靠”到底部，而這可能會破壞應用程序的移動響應能力，而是為什么不構造HTML以更好地支持您要完成的工作。 您也將以這種方式得到更簡單的CSS。

例如，您似乎正在嘗試實現以下目的： 

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

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 Tailwind css：對齊父 div 的元素底部 如何底部對齊DIV元素中的兩個元素？ 將整個標簽元素對齊到其父div的底部 如何使右上浮動元素與其父div的底部垂直對齊？ 父項的底部垂直對齊div 將父div塊與底部對齊 如何對齊父div的子元素？ 將元素與父級和中心的底部對齊 將 `div` 或 `span` 元素與底部對齊 在CSS中將元素對齊到div的底部？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM