2个块在不同的父列中具有相同的高度[重复]

Question

我正在尝试创建一个并排有 2 列的布局。 1 包含背景图像上的文本，另一个包含顶部的宽图像和下面的文本块。这是模型中的一个快速草图（不确定链接到任何图像的最佳方式）：

所以，我遇到的问题是，如何将左列文本与右侧的文本对齐？显然它们在 2 个单独的 div 中，因此彼此之间并没有太多的联系。所以这是个棘手的问题。

这是一个 CodePen： https://codepen.io/moy/pen/wPEdjo

所以我使用flexbox 来设置 div，使它们具有相同的高度，我不确定这是否是最好的方法？目前文本是垂直居中的。我考虑过将文本与底部对齐，但那也行不通，因为文本应该居中以彼此内联，就像草图一样。

我唯一能想到的就是添加一个与左侧图像具有相同纵横比的间隔图像。但是再一次，文本可能不会按照我需要的方式居中？我想我可以使用:before 元素代替分隔符来获得与百分比高度/宽度相同的效果。

所以基本上我被卡住了！有任何想法吗？ flexbox 是最好/唯一的解决方案吗？

Answer 1

我的方法如下，使用纯 css，使用 flexbox。显然，确切的实现取决于几件事，例如您将如何显示图像（例如<img> 标签或background），但这只是为了分享主要思想。

/* basic reset */
* {
    box-sizing: border-box;
}
body {
    position: relative;
    margin: 0;
    padding: 0;
}

/* layout */
#background {
    position: absolute;
    width: 50%;
    height: 100%;
    background-color: LightGrey;
    z-index: -1;
}
#content {
    display: flex;
    flex-direction: column;
}

.row {
    flex: 1;
    display: flex;
}

.col {
    flex: 0 0 50%;
    padding: 50px;
}

#wide-image {
    overflow: hidden;
    padding: 0;
    background-color: GhostWhite;
}

<div id="background"></div>

<div id="content">
    <div class="row">
        <div class="col"></div>
        <div id="wide-image" class="col">
            <img src="http://via.placeholder.com/720x318" />
        </div>
    </div>

    <div class="row">
        <div class="col">
            <h1>Some text here</h1>
            <p>Lorem ipsum dolor sit amet</p>
        </div>
        <div class="col">
            <p>Lorem ipsum dolor sit amet</p>
            <p>Lorem ipsum dolor sit amet</p>
            <p>Lorem ipsum dolor sit amet</p>
            <p>Lorem ipsum dolor sit amet</p>
        </div>
    </div>
</div>