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

我正在尝试为我正在处理的页面设置标题

标题的高度应设置为从中心的主图像开始。旁边是一对div，一个在另一个之上，y而不是z。这两个图像的下部是一个小图像，上部是一些文本。小图像总是比主图像短

我想要的是两个图像的底部对齐，在较小的图像上方留一个空间。然后，我希望文本div自动填充该空间

这是到目前为止我得到的最好的。有什么办法能让这件事符合我的要求吗

正文{
保证金：0；
填充：0；
溢出y：隐藏；
溢出x：隐藏；
}
html{
身高：100%；
宽度：100%
}
.可外穿的{
显示：表格；
宽度：100%；
身高：100%；
}
海德罗先生{
显示：表格行；
高度：0px；
背景色：#ffff80
}
.fillimage{
显示器：flex；
对齐项目：居中；
证明内容：中心；
宽度：100%；
背景色：#80ff80
}
.pad40{
显示：表格单元格；
宽度：40px；
背景色：#ff80ff
}
.内容的宽度{
显示：表格单元格；
宽度：0px；
}
.列表{
显示器：flex；
柔性流动：柱；
}
.textfill可用{
字体大小：25px；
柔性生长：1；
}
.内容高度{
高度：0px；
}
博迪罗先生{
显示：表格行；
身高：100%；
}
.身体内容{
}

你好

我的最佳猜测。。但我想说你的设计可能很脆弱

---

我最好的猜测是。。但我想说你的设计可能很脆弱

---

您可以使用一个名为的简单概念保存一些标记和样式。注释中对代码进行了解释。如果需要，您可以使用此工具

整行的高度设置为 这张大图是

这两个示例将让您知道，总布局高度取决于您需要的较大图像的大小

.container{
显示：栅格；/*激活栅格布局*/
网格模板列：重复（2，1fr）；/*分别创建两列分数*/
网格模板行：最小最大值（最小内容，最大内容）；/*根据内容自动调整高度行*/
栅柱间隙：5px；
网格行间距：5px；
利润率：15px；
}
.1分部{
网格区域：1/1/3/2；/*从第1行开始，从第1列开始，在第31行结束，在第2列结束*/
}
.第2分部{
网格面积：1/2/2/3；
}
.第3分部{
网格面积：2/2/3/3；
}
/*代码段样式*/
.container>div{
边框：2倍实心#000；
填充：10px；
文本对齐：居中；
}

一些文本
一些文本

您可以使用一个名为的简单概念保存一些标记和样式。注释中对代码进行了解释。如果需要，您可以使用此工具

整行的高度设置为 这张大图是

这两个示例将让您知道，总布局高度取决于您需要的较大图像的大小

.container{
显示：栅格；/*激活栅格布局*/
网格模板列：重复（2，1fr）；/*分别创建两列分数*/
网格模板行：最小最大值（最小内容，最大内容）；/*根据内容自动调整高度行*/
栅柱间隙：5px；
网格行间距：5px；
利润率：15px；
}
.1分部{
网格区域：1/1/3/2；/*从第1行开始，从第1列开始，在第31行结束，在第2列结束*/
}
.第2分部{
网格面积：1/2/2/3；
}
.第3分部{
网格面积：2/2/3/3；
}
/*代码段样式*/
.container>div{
边框：2倍实心#000；
填充：10px；
文本对齐：居中；
}

一些文本
一些文本

• 同一行中具有相同高度的项目→ <代码>显示：flex
• 设置左右两侧的宽度
• 将图像定位在右侧的底部

  。右侧{Position:relative；}

  和

  。右侧img{Position:absolute；底部：0}

正文{
保证金：0；
}
.标题{
显示器：flex；
}
.标题img{
显示：块；
}
.头，左，
.头球，对{
边框：1px实心；
}
.header>.left{
宽度：70%；
}
.header>左>img{
左边距：自动；
右边距：自动；
}
.header>。对{
宽度：30%；
位置：相对位置；
}
.header>.right>.text{
文本对齐：居中；
边框：1个实心番茄；
}
.header>.right>.text>*{
填充：0；
保证金：0；
}
.header>.right>img{
位置：绝对位置；
底部：0；
边框：1个实心番茄；
/*水平居中图像*/
左：50%；
转化：translateX（-50%）；
}

猫
文本文本

• 同一行中具有相同高度的项目→ <代码>显示：flex
• 设置左右两侧的宽度
• 将图像定位在右侧的底部

  。右侧{Position:relative；}

  和

  。右侧img{Position:absolute；底部：0}

正文{
保证金：0；
}
.标题{
显示器：flex；
}
.标题img{
显示：块；
}
.头，左，
.头球，对{
边框：1px实心；
}
.header>.left{
宽度：70%；
}
.header>左>img{
左边距：自动；
右边距：自动；
}
.header>。对{
宽度：30%；
位置：相对位置；
}
.header>.right>.text{
文本对齐：居中；
边框：1个实心番茄；
}
.header>.right>.text>*{
填充：0；
保证金：0；
}
.header>.right>img{
位置：绝对位置；
底部：0；
边框：1个实心番茄；
/*水平居中图像*/
左：50%；
转化：translateX（-50%）；
}

猫
文本文本

很抱歉，您的文字描述是

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