CSS делает два элемента в столбце занимают ту же высоту, что и соседний элемент

Question

Я пытаюсь выложить заголовок для страницы, над которой я работаю.

Высота заголовка должна быть установлена ​​от основного изображения в центре. Рядом с ним находится пара элементов div, одна над другой, у y не z. Нижний из этих двух - небольшое изображение, верхний - какой-то текст. Маленькое изображение всегда будет короче основного.

Я хочу, чтобы нижняя часть обоих изображений была выровнена, оставляя пространство над меньшим. Затем я хочу, чтобы текстовый div автоматически заполнил это пространство.

Это лучшее, что у меня есть до сих пор. Есть ли способ заставить это делать то, что я хочу?

body {
     margin: 0;
     padding: 0;
     overflow-y: hidden;
     overflow-x: hidden;
}

html {
     height: 100%;
     width: 100%
}

.outertable {
     display: table;
     width: 100%;
     height: 100%;
}

.headerrow {
     display: table-row;
     height: 0px;
     background-color: #ffff80
}

.fillimage {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
     background-color: #80ff80
}

.pad40 {
     display: table-cell;
     width: 40px;
     background-color: #ff80ff
}

.widthofcontents {
     display: table-cell;
     width: 0px;
}

.columntable {
     display: flex;
     flex-flow: column;
}

.textfillavailable {
     font-size:25px;
     flex-grow: 1;
}

.heightofcontents {
     height: 0px;
}

.bodyrow {
     display: table-row;
     height: 100%;
}

.bodycontent {
}

<div class="outertable">
  <div class="headerrow">
    <div class="fillimage">
      <img src="http://placekitten.com/250/120" />
    </div>

    <div class="pad40">
    </div>
    <div class="widthofcontents">
      <div class="columntable">
        <div class="textfillavailable">
          Hello
        </div>
        <div class="heightofcontents">
          <img src="http://placekitten.com/90/70" />
        </div>
      </div>
    </div>
    <div class="pad40">
    </div>
  </div>
  <div class="bodyrow">
    <div class="bodycontent" contentEditable="true" />
  </div>
</div>

- Правка -

Искусство Ascii показывает, что я хочу

+-------------------------------+----------+
|                               |   Text   |
|        Large                  +----------+
|        Image                  |  Small   |
|                               |  Image   |
+-------------------------------+----------+

С целым рядом, имеющим еговысота установлена ​​на любую высоту большого изображения.

Answer 1

Вы можете сохранить некоторую разметку и стиль с помощью простой концепции CSS Grid . Код поясняется в комментариях. Вы можете поиграть с этим инструментом: Grid Generator , если вам нужно.

Со всей строкой, имеющей высоту, равную высоте большого изображения.

Из двух примеров вы узнаете, что общая высота макета зависит от размера большего изображения, которое вам нужно.

.container {
  display: grid; /* Activate Grid Layout */
  grid-template-columns: repeat(2, 1fr); /* Create two columns of a fraction each */
  grid-template-rows: minmax(min-content, max-content); /* Auto height rows according to content */
  grid-column-gap: 5px;
  grid-row-gap: 5px; 
  margin: 15px;
}

.div1 {
  grid-area: 1 / 1 / 3 / 2; /* Start at Row 1, Start at Column 1, End at Row 3 1 and End at Column 2 */
}

.div2 {
  grid-area: 1 / 2 / 2 / 3;
}

.div3 {
  grid-area: 2 / 2 / 3 / 3;
}

/* Snippet styling */

.container > div {
  border: 2px solid #000;
  padding: 10px;
  text-align: center;
}

<div class="container">
  <div class="div1"> <img src="https://via.placeholder.com/150" /></div>
  <div class="div2"> Some text </div>
  <div class="div3"> <img src="https://via.placeholder.com/100" /> </div>
</div>

<div class="container">
  <div class="div1"> <img src="https://via.placeholder.com/300" /></div>
  <div class="div2"> Some text </div>
  <div class="div3"> <img src="https://via.placeholder.com/150" /> </div>
</div>

Answer 2

• Элементы в одном ряду и одинаковой высоты → display: flex.
• Установите ширину для левой и правой стороны.
• Расположите изображение внизу правой стороны.right { position: relative; } и .right img { position: absolute; bottom: 0 }

body {
  margin: 0;
}

.header {
  display: flex;
}

.header img {
  display: block;
}

.header .left,
.header .right {
  border: 1px solid;
}

.header>.left {
  width: 70%;
}

.header>.left>img {
  margin-left: auto;
  margin-right: auto;
}

.header>.right {
  width: 30%;
  position: relative;
}

.header>.right>.text {
  text-align: center;
  border: 1px solid tomato;
}

.header>.right>.text>* {
  padding: 0;
  margin: 0;
}

.header>.right>img {
  position: absolute;
  bottom: 0;
  border: 1px solid tomato;
  /* Center image horizontally */
  left: 50%;
  transform: translateX(-50%);
}

<div class="header">
  <div class="left">
    <img src="http://placekitten.com/250/120" />
  </div>
  <div class="right">
    <div class="text">
      <h5>Cat</h5>
      <p>Text tex text</p>
    </div>
    <img src="http://placekitten.com/90/70" />
  </div>
</div>

Answer 3

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

https://codepen.io/sheriffderek/pen/1d48767a6d4b570924119e3dadc66bdf

<header>
    <section class="main">
        <img src="https://placehold.it/1600x900" alt="">
    </section>

    <section class="alternate">
        <section class="text">
            <p>Some text</p>
        </section>
        <section class="sub-image">
            <img src="https://placehold.it/800x450" alt="">
        </section>
    </section>
</header>

...

body {
    margin: 0;
}

img {
    display: block;
    max-width: 100%;
}

header {
    border: 1px solid red;
}

section {
    border: 1px solid blue;
}

header {
    display: flex;
    flex-direction: row;
}

.alternate {
    display: flex;
    flex-direction: column;
}

.alternate .text {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}