时间戳

首页 > 解决方案 > 在两个 div 中对齐文本的顶部

html - 在两个 div 中对齐文本的顶部

问题描述

我目前正在尝试弄清楚如何对齐两个 div 框的文本顶部。包装器 div 是一个盒子，在其中我还有两个彼此相邻的 div 盒子。我希望标题文本的顶部与段落文本的顶部对齐（附照片）。下面的代码是我现在所拥有的，所附的图像是我想要的。我试过 'vertical-align:top' 但它不起作用。有任何想法吗？ 我想要的是

.wrapper {
  display: inline-flex;
  width: 100%;
}
  
#box1, #box2 {
    vertical-align: top;
}

#box1 {
    background: #00FFFF;
    width: 35%;
    text-align: right;
}

#box2 {
    background: #FF00FF;
    width: 65%;
}
<div class="wrapper">

  <div id="box1">
    <h1>Header</h1>
  </div>

  <div id="box2">
    <p>Paragraph goes here</p>
  </div>
  
</div>

标签： htmlcssflexboxvertical-alignment

解决方案

只需删除 h1 上的边距

.wrapper {
  display: inline-flex;
  width: 100%;
}
  
#box1, #box2 {
    vertical-align: top;
    border:solid 1px black;
}

#box1 {
    background: #00FFFF;
    width: 35%;
    text-align: right;
}

#box2 {
    background: #FF00FF;
    width: 65%;
}
h1{margin:0;}
<div class="wrapper">

  <div id="box1">
    <h1>Header</h1>
    
  </div>

  <div id="box2">
    <p>Paragraph goes here</p>
  </div>
  
</div>

推荐阅读