使 div 元素的大小与其父元素内最大的 div 元素相同

Question

我有一个带有3个子元素的

，但其中一个子元素的文本比其他子元素少，所以图片和按钮会移动。我希望图片的位置不依赖于文本的大小，以便它可以保持与最大子元素图片相同的位置。

父元素position: relative;和子元素position: absolute;无法解决问题，因为图片和按钮会重叠。

HTML：

 <div id="child">
    <h5>About us</h5>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. .</p>
    <img class="img-responsive" src="http://www.marijazaric.com/minimalism_responsive/images/picture1.jpg" alt=""/>
    <button>Read More</button>
 </div>

SASS：

.parent 
  display: flex
  flex-wrap: wrap
  justify-content: center

 #child
  border-style: solid
  margin-left: 25px 
  margin-right: 25px

- Fabian Arce

Answer 1

如果您将“child”元素的每个声明为flex容器，则可以获得所需的布局。这个快速示例假设有一个具有三个元素的父元素，其中“child”是一个class值而不是id值。在每个“child”中，允许

元素增长以占用所有可用的垂直空间。第三个“child”包括一个半高度的图像，以展示和如何保持固定在底部。

.parent {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.child {
  border: 1px solid #000;
  display: flex;
  flex-direction: column;
  width: 30%;
  margin: 1em;
  padding: 1em;
}

.child h5 {
}

/* should probably be replaced with a class selector */
.child p {
  flex-grow: 1;
}

.child img {
}

.child button {
}

<div class="parent">
  <div class="child">
    <h5>About us</h5>
    <p> Maecenas aliquet enim ut mi lobortis, a faucibus orci interdum. Suspendisse potenti. Ut lobortis varius fringilla. Nunc nec urna metus. Ut vel ligula rhoncus nulla ultrices egestas ac ut arcu. Cras eu odio est. In quis bibendum arcu. </p>
    <img src="http://placehold.it/326x290">
    <button>Read More</button>
  </div>
  <div class="child">
    <h5>Services</h5>
    <p> Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut dui risus, placerat non lorem vitae, laoreet imperdiet mauris. Aenean eleifend augue vel purus tincidunt egestas. Morbi sagittis neque efficitur posuere fermentum. Fusce non lectus at enim sodales dapibus. Nam congue neque nunc, ut accumsan mauris ornare sit amet. Nulla quis quam ut urna ullamcorper commodo. Curabitur ac elit at urna molestie pulvinar id at nisi. Cras in quam at magna hendrerit fermentum. Vestibulum vel nulla aliquet, molestie ante eu, laoreet quam. </p>
    <img src="http://placehold.it/326x290">
    <button>Read More</button>
  </div>
  <div class="child">
    <h5>Latest news</h5>
    <p> Maecenas a dolor pretium, maximus mi eu, molestie ligula. Donec aliquam mollis eros at sodales. Pellentesque vitae dui feugiat, tempor eros eu, bibendum massa. Nulla accumsan finibus leo, et pellentesque urna vestibulum ut. Nullam arcu lectus, consectetur a varius sed, finibus nec metus. Morbi lorem nulla, maximus vitae mi in, efficitur elementum mi. Praesent sit amet risus est. </p>
    <img src="http://placehold.it/326x145">
    <button>Read More</button>
  </div>
</div>

以下是代码片段CSS的SASS版本：

.parent
  display: flex
  flex-direction: row
  justify-content: center

.child
  border: 1px solid #000
  display: flex
  flex-direction: column
  width: 30%
  margin: 1em
  padding: 1em
  h5
  p
    flex-grow: 1
  img, button

- twernt

---

谢谢！非常好用(Y)，你是 Flex 之神哈哈。 - Fabian Arce

@FabianArce 没问题！ - twernt

Answer 2

您可以使用嵌套的 flexbox，并使用 margin-top:auto 将图像推到底部，并使它们保持在同一行。

我在每个 <img> 和 <button> 周围添加了一个 <span> 标签。

.container {
  display: flex;
  justify-content: space-around;
}
.item {
  flex: 0 0 20%;
  display: flex;
  flex-direction: column;
  border: 1px solid;
}
.item h5 {
  margin: 0;
}
.item .pic {
  margin-top: auto;
}
.item .pic img {
  display: block;
  width: 100%;
}

<div class="container">
  <div class="item">
    <h5>About us</h5>
    <p>Donec molestie.</p>
    <span class="pic"><img src="//dummyimage.com/200" alt="" /></span>
    <span class="btn"><button>Read More</button></span>
  </div>
  <div class="item">
    <h5>About us</h5>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    <span class="pic"><img src="//dummyimage.com/200" alt="" /></span>
    <span class="btn"><button>Read More</button></span>
  </div>
  <div class="item">
    <h5>About us</h5>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. .</p>
    <span class="pic"><img src="//dummyimage.com/200" alt="" /></span>
    <span class="btn"><button>Read More</button></span>
  </div>
</div>

- Stickers

Answer 3

使用类似如下语句：

 <div id="child">
<ul>
    <li><h5>About us</h5></li>
    <li><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. .</p></li>
    <li><img class="img-responsive" src="http://www.marijazaric.com/minimalism_responsive/images/picture1.jpg" alt=""/></li>
    <li><button>Read More</button></li>
</ul>
 </div>

 SASS:
.parent 
  display: flex
  flex-wrap: wrap
  justify-content: center

 #child
  border-style: solid
  margin-left: 25px 
  margin-right: 25px

#child li {display:block};
#child ul {display:inline-table;}

- Mourad karoudi