css-float - 将 div 与容器顶部对齐

Question

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

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;
}

Answer 1

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

见小提琴

<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不在浏览器窗口的右边缘。