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는 코드에서 다음에 인 요소로 바로 이동합니다. (원래 코드에서 닫히지 않은 사업부를 가지고 있습니다.)

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이 브라우저 창의 오른쪽 가장자리에 없기 때문에 잘 보이지 않습니다.