Pure CSS равная высота отдельно вложенные контейнеры

Question

Существует множество примеров столбцов «равных высот» CSS, макетов «Holy Grail», умных реализаций display: table-cell и, конечно же, некоторых восхитительных идей, не в последнюю очередь здесь, на SO.

Но я пытаюсь достичь чего-то, чего я не смог найти нигде, и я не смог достичь, не прибегая к JS, чего я бы предпочел избежать.

Я пытаюсь создать набор родительских контейнеров равной высоты, каждый из которых имеет набор дочерних элементов, которые разделяют высоту между картами. Каждая карта отделена от других соседних карт желобом. По-видимому, я не могу отправлять изображения, потому что я новичок, но визуально легче объяснить. Итак, вот ссылка на бесплатный сайт для размещения изображений: http://postimg.org/image/ltcd8ns1l/

На изображении вы увидите три карты (1, 2, 3), каждая из которых имеет три секции (1a, 1b, 1c, 2a, 2b , 2с, 3а, 3б, 3с). Каждая секция внутри карты имеет ту же высоту, что и эквивалентная секция других карт (т. Е. 1b = 2b = 3b, 1c = 2c = 3c и т. Д.). Высота каждой эквивалентной секции (например, 1b, 2b & 3b) определяется высотой самой высокой из этих разделов (то есть самой высокой «b»). Высота самой высокой секции определяется количеством содержимого внутри этого раздела.

я смог достичь этого визуально с помощью метода display: table, включая элементы отдельных «табличной-CELL» для желобов между картами, но, к сожалению, разметка неупорядоченной и unsemantic, что-то вроде этого:

<div class="table-row"> 
 
\t <div class="heading">heading</div> 
 
\t <div class="gutter"></div> 
 
\t <div class="heading">heading</div> 
 
\t <div class="gutter"></div> 
 
\t <div class="heading">heading</div> 
 
\t <div class="gutter"></div> 
 
</div> 
 
<div class="table-row"> 
 
\t <div class="body">body text here</div> 
 
\t <div class="gutter"></div> 
 
\t <div class="body">body text here</div> 
 
\t <div class="gutter"></div> 
 
\t <div class="body">body text here</div> 
 
\t <div class="gutter"></div> 
 
</div> 
 
<div class="table-row"> 
 
\t <div class="foot">footer</div> 
 
\t <div class="gutter"></div> 
 
\t <div class="foot">footer</div> 
 
\t <div class="gutter"></div> 
 
\t <div class="foot">footer</div> 
 
\t <div class="gutter"></div> 
 
</div>

... Ужасный.

Так что мне также удалось получить что-то, работающее с display: flex. Вот краткий демо в CodePen: http://codepen.io/anon/pen/xbXWpQ

И для потомков вот HTML:

<div class="flex-wrap"> 
 
\t <div class="flex-container"> 
 
\t \t <a href="#"> 
 
\t \t \t <div class="image"> 
 
\t \t \t \t <div class="sample-image-one"></div> 
 
\t \t \t </div> 
 
\t \t \t <div class="heading">heading: Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque 
 
\t \t \t </div> 
 
\t \t \t <div class="body">body text: Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa.</div> 
 
\t \t \t <div class="foot">footer: Sed ut perspiciatis unde omnis.</div> 
 
\t \t </a> 
 
\t \t <a href="#"> 
 
\t \t \t <div class="image"> 
 
\t \t \t \t <div class="sample-image-two"></div> 
 
\t \t \t </div> 
 
\t \t \t <div class="heading">heading: Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore</div> 
 
\t \t \t <div class="body">body text: Sed ut perspiciatis unde omnis iste natus error sit voluptatem.</div> 
 
\t \t \t <div class="foot">footer: Sed ut perspiciatis unde omnis iste natus error sit.</div> 
 
\t \t </a> 
 
\t \t <a href="#"> 
 
\t \t \t <div class="image"> 
 
\t \t \t \t <div class="sample-image-three"></div> 
 
\t \t \t </div> 
 
\t \t \t <div class="heading">heading: Sed ut perspiciatis unde omnis iste natus error</div> 
 
\t \t \t <div class="body">body text: Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</div> 
 
\t \t \t <div class="foot">footer: Sed ut perspiciatis.</div> 
 
\t \t </a> 
 
\t </div> 
 
</div>

И SCSS:

// wrap & global styles 
body, html { 
    margin: 0; 
    width: 100%; 
} 
.flex-wrap { 
    padding: 3%; 
    font-family: sans-serif; 
} 
.flex-container { 
    display: flex; 
    flex-wrap: wrap; 
    > div { 
    margin-right: 3%; 
    width: 25%; // should be 29.33333% but this doesn't seem to work in codepen 
    color: white; 
    padding: 15px; 
    } 
} 

// image sections 
.image { 
    min-height: 100px; 
    order: 1; 
    background-color: teal; 
    > div { 
    background-color: coral; 
    padding: 10px; 
    } 
    &:nth-of-type(3n+3){ 
    margin-right: 0; 
    } 
} 

// sample images of different heights 
.sample-image-one { height: 120px; } 
.sample-image-two { height: 160px; } 
.sample-image-three { height: 80px; } 

// copy sections 
.heading { 
    order: 2; 
    background-color: tomato; 
    &:nth-of-type(3n+4){ 
    margin-right: 0; 
    } 
} 

.body { 
    order: 3; 
    background-color: deepskyblue; 
    &:nth-of-type(3n+5){ 
    margin-right: 0; 
    } 
} 

.foot { 
    order: 4; 
    background-color: gold; 
    &:nth-of-type(3n+3){ 
    margin-right: 0; 
    } 
} 

Я предпочитаю HTML с использованием flex, так как он находится в правильном порядке и не содержит бессмысленных элементов.

Но он не подходит достаточно далеко: я хочу, чтобы иметь возможность обернуть каждую карту внутри своего собственного элемента, например. <article>...</article>. Отчасти потому, что вся карта может быть ссылкой, но также потому, что на мой взгляд это обеспечит более четкую, более соответствующую разметку разметки. Но flex не работает таким образом, так что это сложно.

Я искал целую вечность, но я не вижу способа сделать это без использования JS или неприятного HTML. Оба из них я бы предпочел избежать.

Любые идеи о том, как достичь такой цели?

Answer 1

Ваша цель иметь такую ​​же высоту для .sample-image-[x]?

Если да, то вы можете попробовать установить контейнер .image в flex-direction: column, а затем с помощью flex-basis

.image { 
    display:flex; 
    flex-direction:column; 
    min-height: 100px; 
    order: 1; 
    background-color: teal; 
    > div { 
    background-color: coral; 
    padding: 10px; 
    flex-basis:100px; 
    } 
    &:nth-of-type(3n+3){ 
    margin-right: 0; 
    } 
}