div位于相同高度

问题描述 投票：0回答：5

几天来我都不知道该怎么做，我尝试了不同的方法。我无法将按钮放置在相同的高度。

我尝试通过position: absolute; bottom: 0;建立了与position: relative;的父级

@import url('https://fonts.googleapis.com/css?family=Montserrat|Quicksand:700|Source+Sans+Pro&display=swap');
body {
  width: 100%;
}

.contener_new_main {
  margin: 0 auto;
  width: 75em;
  border: 1px solid red;
  overflow: hidden;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.contener_new {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  float: left;
  margin: 1.2em;
  width: 32em;
  /* Ширина блока */
  background-color: #ffffff;
  /* Фоновый цвет*/
  border: 2px solid #D4D4D4;
  /* Ширина и цвет границ*/
  border-radius: 1em;
  /* Радиус границ*/
  box-shadow: 0 0 15px #A9A9A9;
  /* Размер и цвет тени блока*/
  transition: 1s;
  /* Время эффекта */
  z-index: 99999999999999999999999;
}

.contener_new_content {
  width: 28em;
  margin: 1.2em auto;
  position: relative;
  font-weight: 700;
}

.contener_new:hover {
  transform: scale(1.1);
  /* Увеличиваем масштаб */
}

.contener_new_content img {
  width: 28em;
}

.contener_new_info {
  display: flex;
  margin-top: 1em;
  font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
  color: #adadad;
  font-size: 0.7em;
}

.contener_new_views {
  padding-left: 1em;
}

.contener_new_date {
  position: absolute;
  right: 0;
  padding-right: 1em;
}

.contener_new_h1 {
  text-align: center;
  font-size: 1.2em;
  margin: 0.5em 0;
  font-family: "Quicksand", Georgia, "Times New Roman", Times, serif;
}

.contener_new_h1 a {
  color: #282828;
  text-decoration: none;
}

.contener_new_h1 a:hover {
  color: #22a3ab;
}

.contener_new_h2 {
  text-align: center;
  color: #adadad;
  font-size: 0.88em;
}

.contener_new_button a {
  vertical-align: bottom;
  /* вот она */
  display: block;
  text-decoration: none;
  outline: none;
  display: inline-block;
  width: 100%;
  height: 4.2em;
  line-height: 4.2em;
  border-radius: 0.5em;
  margin: 10px 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7em;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 5px;
  font-weight: 600;
  color: #524f4e;
  background: #22a3ab;
  box-shadow: 0 8px 15px rgba(0, 0, 0, .1);
  transition: .3s;
}

.contener_new_button a:hover {
  background: #00a8ff;
  box-shadow: 0 15px 20px rgba(0, 168, 255, .4);
  color: white;
  transform: translateY(-7px);
}


/*3d Эфект*/
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="contener_new_main">
    <div class="contener_new">
      <div class="contener_new_content">
        <a href="#"><img src="1.jpg" alt=""></a>
        <div class="contener_new_info">
          <div class="contener_new_views">2</div>
          <div class="contener_new_date">date: 2019-200</div>
        </div>
        <div class="contener_new_h1"><a href="#">s 385 mile385 </a></div>

        <div class="contener_new_h2">Corsica has 385 mile385 mile385 mile385 mile385 mile385 mile385 mile385 mile385 mile385 mile385 mile385 mile385 mile385 mile385 miles of coastline</div>
        <div class="contener_new_button"><a href="">Подробнее...</a></div>
      </div>
    </div>
    <div class="contener_new">
      <div class="contener_new_content">
        <a href="#"><img src="1.jpg" alt=""></a>
        <div class="contener_new_info">
          <div class="contener_new_views">2</div>
          <div class="contener_new_date">Date: 2019-200</div>
        </div>
        <div class="contener_new_h1"><a href="#">a has 385 miles </a></div>

        <div class="contener_new_h2">Corsica has 385 miles of coastline, more than 200 beaches, nature reserves, natural landscapes on the Corsican coastline are only a short dinghy ride away from your charter yacht. Here are a few of our favorite landscapes worth sailing.</div>
        <div class="contener_new_button"><a href="">Подробнее...</a></div>
      </div>
    </div>
    <div class="contener_new">
      <div class="contener_new_content">
        <a href="#"><img src="1.jpg" alt=""></a>
        <div class="contener_new_info">
          <div class="contener_new_views">2</div>
          <div class="contener_new_date">Date: 2019-200</div>
        </div>
        <div class="contener_new_h1"><a href="#">s. A gentle Mediterranean climate has promoted rich forests of evergreen and protects a wide variety of bird species and several endangered animals. Breathtakil landscapes on the Corsican coa</a></div>

        <div class="contener_new_h2">Corsica has 385 miles of coastline, more than 200 beaches, nature reserves, and mountain retreats. A gentle Mediterranean climate has promoted rich forests of evergreen and protects a wide variety of bird species and several endangered animals.
          Breathtakil landscapes on the Corsican coastline are only a short dinghy ride away from your charter yacht. Here are a few of our favorite landscapes worth sailing.</div>
        <div class="contener_new_button"><a href="">Подробнее...</a></div>
      </div>
    </div>
    <div class="contener_new">
      <div class="contener_new_content">
        <a href="#"><img src="1.jpg" alt=""></a>
        <div class="contener_new_info">
          <div class="contener_new_views">2</div>
          <div class="contener_new_date">date: 2019-200</div>
        </div>
        <div class="contener_new_h1"><a href="#">MUST-SEE COASTAL LANDSCAPES IN CORSICA</a></div>
        <div class="contener_new_h2">Corsica has 385 miles of coastline, more than 200 beaches, nature reserves, and mountain retreats. A gentle Mediterranean climate has promoted rich forests of evergreen and protects a wide variety of bird species and several endangered animals.
          Breacapes on the Corsican coastline are only a short dinghy ride away from your charter yacht. Here are a few of our favorite landscapes worth sailing.</div>
        <div class="contener_new_button"><a href="">Подробнее...</a></div>
      </div>
    </div>
    <div class="contener_new">
      <div class="contener_new_content">
        <a href="#"><img src="1.jpg" alt=""></a>
        <div class="contener_new_info">
          <div class="contener_new_views">2</div>
          <div class="contener_new_date">date: 2019-200</div>
        </div>
        <div class="contener_new_h1"><a href="#">s 385 miles of </a></div>
        <div class="contener_new_h2">Corsica has 385 miles of coastline, more than 200 beaches, nature reson the Corsican coastline are only a short dinghy ride away from your charter yacht. Here are a few of our favorite landscapes worth sailing.</div>
        <div class="contener_new_button"><a href="">Подробнее...</a></div>
      </div>
    </div>
  </div>
</body>

</html>
html css
5个回答
1
投票

您可以使内容沿列方向弯曲，然后将flex-grow应用于h2：

@import url('https://fonts.googleapis.com/css?family=Montserrat|Quicksand:700|Source+Sans+Pro&display=swap');
body {
  width: 100%;
}

.contener_new_main {
  margin: 0 auto;
  width: 75em;
  border: 1px solid red;
  overflow: hidden;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.contener_new {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  float: left;
  margin: 1.2em;
  width: 32em;
  /* Ширина блока */
  background-color: #ffffff;
  /* Фоновый цвет*/
  border: 2px solid #D4D4D4;
  /* Ширина и цвет границ*/
  border-radius: 1em;
  /* Радиус границ*/
  box-shadow: 0 0 15px #A9A9A9;
  /* Размер и цвет тени блока*/
  transition: 1s;
  /* Время эффекта */
  z-index: 99999999999999999999999;
}

.contener_new_content {
  width: 28em;
  margin: 1.2em auto;
  position: relative;
  font-weight: 700;
  
  display:flex; 
  flex-direction:column;
}

.contener_new:hover {
  transform: scale(1.1);
  /* Увеличиваем масштаб */
}

.contener_new_content img {
  width: 28em;
}

.contener_new_info {
  display: flex;
  margin-top: 1em;
  font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
  color: #adadad;
  font-size: 0.7em;
}

.contener_new_views {
  padding-left: 1em;
}

.contener_new_date {
  position: absolute;
  right: 0;
  padding-right: 1em;
}

.contener_new_h1 {
  text-align: center;
  font-size: 1.2em;
  margin: 0.5em 0;
  font-family: "Quicksand", Georgia, "Times New Roman", Times, serif;
}

.contener_new_h1 a {
  color: #282828;
  text-decoration: none;
}

.contener_new_h1 a:hover {
  color: #22a3ab;
}

.contener_new_h2 {
  text-align: center;
  color: #adadad;
  font-size: 0.88em;
  flex-grow:1;
}

.contener_new_button a {
  vertical-align: bottom;
  /* вот она */
  display: block;
  text-decoration: none;
  outline: none;
  display: inline-block;
  width: 100%;
  height: 4.2em;
  line-height: 4.2em;
  border-radius: 0.5em;
  margin: 10px 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7em;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 5px;
  font-weight: 600;
  color: #524f4e;
  background: #22a3ab;
  box-shadow: 0 8px 15px rgba(0, 0, 0, .1);
  transition: .3s;
}

.contener_new_button a:hover {
  background: #00a8ff;
  box-shadow: 0 15px 20px rgba(0, 168, 255, .4);
  color: white;
  transform: translateY(-7px);
}


/*3d Эфект*/
<div class="contener_new_main">
  <div class="contener_new">
    <div class="contener_new_content">
      <a href="#"><img src="1.jpg" alt=""></a>
      <div class="contener_new_info">
        <div class="contener_new_views">2</div>
        <div class="contener_new_date">date: 2019-200</div>
      </div>
      <div class="contener_new_h1"><a href="#">s 385 mile385 </a></div>

      <div class="contener_new_h2">Corsica has 385 mile385 mile385 mile385 mile385 mile385 mile385 mile385 mile385 mile385 mile385 mile385 mile385 mile385 mile385 miles of coastline</div>
      <div class="contener_new_button"><a href="">Подробнее...</a></div>
    </div>
  </div>
  <div class="contener_new">
    <div class="contener_new_content">
      <a href="#"><img src="1.jpg" alt=""></a>
      <div class="contener_new_info">
        <div class="contener_new_views">2</div>
        <div class="contener_new_date">Date: 2019-200</div>
      </div>
      <div class="contener_new_h1"><a href="#">a has 385 miles </a></div>

      <div class="contener_new_h2">Corsica has 385 miles of coastline, more than 200 beaches, nature reserves, natural landscapes on the Corsican coastline are only a short dinghy ride away from your charter yacht. Here are a few of our favorite landscapes worth sailing.</div>
      <div class="contener_new_button"><a href="">Подробнее...</a></div>
    </div>
  </div>
  <div class="contener_new">
    <div class="contener_new_content">
      <a href="#"><img src="1.jpg" alt=""></a>
      <div class="contener_new_info">
        <div class="contener_new_views">2</div>
        <div class="contener_new_date">Date: 2019-200</div>
      </div>
      <div class="contener_new_h1"><a href="#">s. A gentle Mediterranean climate has promoted rich forests of evergreen and protects a wide variety of bird species and several endangered animals. Breathtakil landscapes on the Corsican coa</a></div>

      <div class="contener_new_h2">Corsica has 385 miles of coastline, more than 200 beaches, nature reserves, and mountain retreats. A gentle Mediterranean climate has promoted rich forests of evergreen and protects a wide variety of bird species and several endangered animals.
        Breathtakil landscapes on the Corsican coastline are only a short dinghy ride away from your charter yacht. Here are a few of our favorite landscapes worth sailing.</div>
      <div class="contener_new_button"><a href="">Подробнее...</a></div>
    </div>
  </div>
  <div class="contener_new">
    <div class="contener_new_content">
      <a href="#"><img src="1.jpg" alt=""></a>
      <div class="contener_new_info">
        <div class="contener_new_views">2</div>
        <div class="contener_new_date">date: 2019-200</div>
      </div>
      <div class="contener_new_h1"><a href="#">MUST-SEE COASTAL LANDSCAPES IN CORSICA</a></div>
      <div class="contener_new_h2">Corsica has 385 miles of coastline, more than 200 beaches, nature reserves, and mountain retreats. A gentle Mediterranean climate has promoted rich forests of evergreen and protects a wide variety of bird species and several endangered animals.
        Breacapes on the Corsican coastline are only a short dinghy ride away from your charter yacht. Here are a few of our favorite landscapes worth sailing.</div>
      <div class="contener_new_button"><a href="">Подробнее...</a></div>
    </div>
  </div>
  <div class="contener_new">
    <div class="contener_new_content">
      <a href="#"><img src="1.jpg" alt=""></a>
      <div class="contener_new_info">
        <div class="contener_new_views">2</div>
        <div class="contener_new_date">date: 2019-200</div>
      </div>
      <div class="contener_new_h1"><a href="#">s 385 miles of </a></div>
      <div class="contener_new_h2">Corsica has 385 miles of coastline, more than 200 beaches, nature reson the Corsican coastline are only a short dinghy ride away from your charter yacht. Here are a few of our favorite landscapes worth sailing.</div>
      <div class="contener_new_button"><a href="">Подробнее...</a></div>
    </div>
  </div>
</div>
0
投票

绝对位置绝对应该起作用：

.contener_new_button {
  position: absolute;
  bottom: 0;
  width: 100%;
}
0
投票

创建一个类以使用所有框来设置高度：100％！important;它的工作肯定是希望。

0
投票

您可以在jQuery的帮助下为div设置相同的高度。例如，检查以下链接。

https://jsfiddle.net/halirgb/E8qGE/

您必须为按钮的上述div赋予相同的高度。

为此，您必须保持这样的HTML结构。

<div class="contener_new">
  <div class="contener_new_content">
    <div class="new-div">
      <a href="#"><img src="1.jpg" alt=""></a>
      <div class="contener_new_info">
        <div class="contener_new_views">2</div>
        <div class="contener_new_date">date: 2019-200</div>
      </div>
      <div class="contener_new_h1"><a href="#">MUST-SEE COASTAL LANDSCAPES IN CORSICA</a></div>
      <div class="contener_new_h2">Corsica has 385 miles of coastline, more than 200 beaches, nature reserves, and mountain retreats. A gentle Mediterranean climate has promoted rich forests of evergreen and protects a wide variety of bird species and several endangered animals.
        Breacapes on the Corsican coastline are only a short dinghy ride away from your charter yacht. Here are a few of our favorite landscapes worth sailing.
      </div>
    </div>
    <div class="contener_new_button"><a href="">Подробнее...</a></div>
  </div>
</div>

这里我将新的<div>放在Button上方，并将上面的内容保留在其中。

现在检查上面的给定链接，并用'product'替换new-div类，所以最后一个jQuery会这样。

$(document).ready(function(){
    $('.new-div').equalHeights();
});
0
投票

`.contener_new_content {自我调整：结束；}

.. contener_new_content {字体粗细：700；}`

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.