使div与父级中最大的div相同

Question

所以我有这个div有3个孩子，但其中一个文本比其他孩子少，所以图像和按钮移动，我希望图像的位置不依赖于大小文本，因此它可以与最大的子图像保持相同的位置。

父position: relative;和子position: absolute;不起作用，因为图片和按钮traslape

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

Answer 1

如果您还将每个“子”元素声明为弹性容器，则可以获得所需的布局。

此快速示例假定父元素具有三个元素，其中“child”是class值而不是id值。在每个“子”中，允许p元素增长以占用所有可用的垂直空间。第三个“孩子”包含一个半高图像，以显示img和button如何固定在底部。

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

SASS版本的代码片段CSS：

.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

Answer 2

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

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

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

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;}