将 div 与容器顶部对齐

【问题标题】：Align div to top of container将 div 与容器顶部对齐
【发布时间】：2013-04-04 02:30:50
【问题描述】：

您可以在此JSFiddle 中看到search div 居中对齐，如何使其与顶部对齐？

HTML：

<div id="wrapper">
    <div id="banner">
        <a href="#"><h1>Title</h2><br />
        <h2>Subtitle</h2></a>
        <div id="search">
            <label>Search</label>
            <input type="textbox"/>
            <input type="submit" />
            <img src="images/logo.png" alt="logo"/>
        </div>
</div>

CSS：

#wrapper{
    width:85%;
    margin:35px auto;
}

#banner{
    height:150px;
    padding:30px;
    padding-bottom:5px;
}
#search{
    float:right;
    display:inline;
    width:38%;
}

#banner h1, #banner h2{
margin:0;padding:0;color:#A2A2A2;display:inline;
}
#banner h1{
font-size:50px;
}
#banner h2{
font-size:35px;
}

【问题讨论】：

标签： css-float vertical-alignment

【解决方案1】：

您至少有两个选择。如果要将搜索 div 浮动到右侧，请在 html 代码中将其向上移动。现在搜索 div 会浮动到代码中 after 的元素。（请注意，您在原始代码中有一个未关闭的 div。）

See the Fiddle

<div id="wrapper">
  <div id="banner">
    <div id="search">
      <label>Search</label>
      <input type="textbox"/>
      <input type="submit" />
      <img src="images/logo.png" alt="logo"/>
    </div>
    <a class="" href="#"><h1>Title</h2><br />
    <h2 class="">Subtitle</h2></a>
  </div>
</div>

其他选项是使前面的元素（a 和 h2）浮动到搜索 div 的左侧，但这看起来不太好，因为搜索 div 不在右侧浏览器窗口的边缘。

【讨论】：