CSS 使列中的两个 div 占据与相邻 div 相同的高度

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

我的最佳猜测.. 但我会说你的设计可能非常脆弱...

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

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

您可以使用称为CSS Grid 的简单概念来保存一些标记和样式。代码在 cmets 中进行了解释。如果需要，您可以使用此工具：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>