如何使并排的Verse元素保持相同高度？

直接用Flex布局就能轻松实现左右区块等高，不用再依赖float这类老布局方式。下面是修改后的代码：

修改后的CSS #

.verse-container {
  display: flex;
  gap: 1rem; /* 可选，给两个区块之间添加间距 */
}
.verse {
  width: 50%;
}
.verse img {
  height: 1em;
}

修改后的HTML #

<h1>诗篇 1</h1>
<div class="verse-container">
  <div class="verse">
    不从恶人的计谋，不站罪人的道路，不坐亵慢人的座位。<br><br>
    惟喜爱耶和华的律法，昼夜思想，这人便为有福！<br><br>
    他要像一棵树栽在溪水旁，按时候结果子，叶子也不枯干。凡他所做的尽都顺利。<br><br>
    恶人并不是这样，乃像糠秕被风吹散。<br><br>
    因此当审判的时候，恶人必站立不住；罪人在义人的会中也是如此。<br><br>
    因为耶和华知道义人的道路，恶人的道路却必灭亡。
  </div>

  <div class="verse">
    Blessed is he who does not walk in the counsel of the wicked, nor stand in the way of sinners, nor sit in the seat of scorners.<br><br>
    But his delight is in the law of the <img src="/images/THE LORD.png">, and on His law he meditates day and night.<br><br>
    He will be like a tree planted near good waters; he will bring good fruit in his season, and everything he does will prosper.<br><br>
    Not so with the wicked! Not so... they are like chaff that the wind blows away.<br><br>
    Therefore, the wicked will not stand in judgement, nor in the company of the just.<br><br>
    For the <img src="/images/THE LORD.png"/> watches over the way of the just, but the way of the wicked leads to destruction.
  </div>
</div>

关键说明 #

• 给外层容器添加display: flex，Flex布局会自动让子元素高度统一对齐，无需手动设置高度。
• 把原有的<span>替换为<div>，块级元素更适合布局场景，避免行内元素的样式限制。
• 移除了float、position:inline-block这类冗余样式，Flex已经能完成排版需求。

内容的提问来源于stack exchange，提问作者kf.