Сделать divs того же самого размера, что и самый большой внутри родителя

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

использовать что-то например:

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

Answer 3

Вы можете сделать это с вложенными 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>