將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不在瀏覽器窗口的右邊緣。