如何让标题与图片顶部对齐（line-height行高问题）

嘿，我懂你的痛点——要让左侧CMS生成的内容（不管是标题、段落，还是行高、换行情况）和右侧图片始终顶部对齐，还不能用负边距，之前的line-height方案只适用于简单场景对吧？

给你推荐Flexbox布局，这绝对是最适合这种场景的解决方案，完全不需要操心左侧内部元素的样式，不管内容怎么变，顶部对齐都能稳稳实现。

解决方案代码 #

CSS

body {
  max-width: 400px;
}
/* 新增父容器作为flex容器 */
.container {
  display: flex;
  gap: 10px; /* 可选：给两栏加个间距，视觉更舒适 */
}
/* 两栏各占一半宽度 */
.column {
  flex: 1;
}
img {
  width: 100%;
}
/* 左侧CMS内容随便设置样式，完全不影响对齐 */
h1 {
  margin: 0;
  padding: 0;
  line-height: 2em;
}
p {
  line-height: 1.8em;
  margin-top: 0;
}

HTML

<div class="container">
  <div class="column">
    <h1>Hello world! <br>Foo Bar Baz</h1>
    <!-- 哪怕加个段落也不影响顶部对齐 -->
    <p>这是CMS生成的额外内容，行高随便设，完全不影响顶部对齐效果~</p>
  </div>
  <div class="column">
    <img src="https://media1.tenor.com/images/1c765c0d5963c84864bece62355713e0/tenor.gif?itemid=8240085">
  </div>
</div>

为什么这个方案好用？ #

• Flexbox的align-items默认值是flex-start，所有flex项都会沿容器顶部对齐，不管内部元素的margin、line-height、换行情况如何。
• 完全不需要控制左侧栏的任何内部元素样式，哪怕CMS生成h1-h6、p等各种标签，或者给它们设置任意行高，都不会破坏顶部对齐效果。
• 不用负边距这种hack式的方案，代码更干净、更健壮，适配各种场景。

你可以直接把这个布局套进去，不管后续CMS生成什么内容，顶部对齐的效果都能保持稳定~

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