2在不同的父列中阻止相同的高度

Question

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

所以，我遇到的问题是，如何将左栏文本与右栏文本对齐？显然他们是在两个独立的div中，因此彼此之间没有多少联系。这是一个棘手的问题。

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

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

我唯一能想到的是添加与左图像相同宽高比的间隔图像。但又一次，文本可能不会像我需要的那样集中在一起？我想我可以使用:before元素而不是间隔符来获得与百分比高度/宽度相同的效果。

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

Answer 1

我的方法如下，使用纯粹的CSS，使用flexbox。显然，确切的实现取决于几个方面，比如你要如何显示图像（例如<img>标签或background），但这只是为了分享主要想法。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;