css - 相对于彼此对齐元素

Question

基本上我想知道您是否可以相对于彼此定位 2 个元素。我在 div 中有一个 h1 和 h2，我想将 h2 对齐到 h1 的右侧

html

<header>
  <div>
    <h1>Header with some text</h1>
    <h2>Other header</h2>
  </div>
  <div>
  </div>
  <div>
  </div>
</header>

CSS

header { 
  width: 960px;
}

div {
  width: 318px;
  float: left;
  border: 1px solid red;
  min-height: 200px;
}

h1, h2 {
  font-size: 16px;
}

Answer 1

最简单的解决方案是在 extra inline-block div 中包装标题，并应用 text-align:right 。

.parent {
  width: 80%;
  border: 1px solid red;
}
.wrap {
  display: inline-block;
  text-align: right;
}

<div class="parent">
  <div class="wrap">
    <h1>
I'm a really long h1 tag
</h1>
    <h2>
 Short h2 tag
</h2>
  </div>
</div>