如何获得此选择以垂直对齐底部？

Question

我有这个简单的代码：

<div>
  <select style="float:right; vertical-align:bottom;">
    <option>Status</option>
  </select>
  <h3 style"font-size: 72px;">header</h3>
</div>

http://jsfiddle.net/pqLmtskd/1

这似乎很容易，但是我缺少基本的东西...

能否请您告诉我如何将select元素放到h3标签的底部？另外，如果您可以帮助我理解为什么我的代码无法做到这一点，那将会很有帮助。

我在这里阅读了这个问题： How to vertical align bottom

但是不得不使用大量代码只是为了使一个元素与其相邻元素相比向下移动似乎有点冗长。似乎是     垂直对齐：底部 应该不言自明。

请参见下图。我希望右侧的选择与绿色文本的最低边缘对齐。

Answer 1

<div>
  <h3 style"font-size: 72px;">header</h3>
  <select>
    <option>Status</option>
  </select>
</div>

您需要将h3标记放在选择之前，以便按照您想要的方式获取

Answer 2

据我了解，您希望将下拉菜单放在H3标签的顶部，这样看起来就像这样：

    <div style='position:relative;'>
      <select style="bottom:0;right:0;">
        <option>Status</option>
      </select>
      <h3 style"font-size: 72px;">header</h3>
    </div>

Answer 3

如果我对图片的理解正确，您希望选择菜单位于标题顶部上方的右侧。如果是这种情况，您可以使用flexbox堆叠选择和标题，然后将菜单浮动到右侧。

.container {
  display: flex;
  flex-direction: column;
}

select {
  float:right; 
}

h3 {
  margin: 0;
}

<div class="container">
  <div>
    <select>
      <option>Status</option>
    </select>
  </div>
  <h3>header</h3>
</div>