<分区>
jquery - 2 block 在不同父列中的相同高度
我正在尝试创建一个并排有 2 列的布局。 1 个包含背景图像上的文本，另一个包含顶部的宽图像和下面的文本 block 。这是模型的快速草图(不确定链接到任何图像的最佳方式):
那么，我遇到的问题是，如何将左列文本与右列文本对齐？很明显，它们在 2 个独立的 div 中，所以彼此之间没有太多联系。这就是棘手的地方。
这是一个 CodePen: https://codepen.io/moy/pen/wPEdjo
所以我使用 flexbox 来设置 div，使它们具有相同的高度，我不确定这是否是最好的方法？目前文本是垂直居中的。我想过将文本对齐到底部，但那也行不通，因为文本应该居中以便彼此对齐，就像草图一样。
我唯一能想到的就是添加一个与左图长宽比相同的间隔图像。但又一次，文本可能不会按照我需要的方式居中？我想我可以使用 :before 元素而不是间隔符来对百分比高度/宽度产生相同的影响。
所以基本上我被卡住了!有任何想法吗？ flexbox 是最好的/唯一的解决方案吗？
最佳答案
我的方法如下所示，使用纯 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>关于jquery - 2 block 在不同父列中的相同高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47518740/