将div对齐至容器顶部

Question

您可以在此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; 
} 

Answer 1

您至少有两种选择。如果要将搜索div浮动到右侧，请将其向上移动html代码。现在搜索div浮动到代码中之后的元素。 （请注意，您必须在原代码的未闭合的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不在浏览器窗口的右边缘。