當寬度隨窗口大小而變化時，如何對齊單獨的div中的元素？

我有一個搜索輸入和一個結果元素。兩者都在單獨的div /容器中，但我需要它們在窗口大小更改時對齊。我非常確定有比JavaScript更好的方法。當寬度隨窗口大小而變化時，如何對齊單獨的div中的元素？

一個窗口大小：http://i.imgur.com/KSmKsFL.png 小窗口：http://i.imgur.com/tSMQvdD.png

我使用這個：http://getuikit.com/docs/utility.html，我喜歡它，但至於響應式設計顯然我做錯了什麼。不管屏幕寬度如何，都不應該很難讓兩個元素對齊。有什麼建議麼？

我的HTML

<div class="header-section"> 
    <div class="uk-container uk-container-center uk-text-center"> 
     <h1 class="uk-h1" id="head1">Search</h1> 
     <h1 class="uk-h1" id="head2">Lab</h1> 
    </div> 
</div> 

<div class="input-section"> 
    <div class ="uk-container uk-container-center uk-text-center"> 
     <form id="search-form" class="uk-form"> 
      <input id="search-input" type="text" placeholder="Bing Engine "> 
      <button id="search-btn" class="uk-button uk-button-primary" type="button">Search</button> 
     </form> 
    </div> 
</div> 

<div class="results-section"> 
    <div id="results-container" class="uk-container uk-container-center uk-width-1-2"> 
     <div class="result"> 
      <a class="result-title" href="#">Bhutan travel advice</a> 
      <div class="result-url">https://www.gov.uk/foreign-travel-advice/bhutan</div> 
      <p class="result-summary">Latest travel advice for Bhutan including safety and security, entry requirements, travel warnings and health.</p> 
     </div> 
    </div> 
</div>

這感覺挺乾淨的給我。

我的CSS：http://pastebin.com/4kkpe8cq

來源

2013-08-12 Strings

你的小提琴：http://jsfiddle.net/nabil_kadimi/cgnmQ/ –

你怎麼想他們保持一致？ –

就這樣結果的開始是在酒吧的開始。 – Strings

使用CSS：

@media(min-width:800px) { 
    // your CSS for a small width 
}

來源

2013-08-12 10:53:48 Dion

OP說：「我很確定有比JavaScript更好的方法。」 –

糟糕：D好我會編輯答案 – Dion

當寬度隨窗口大小而變化時，如何對齊單獨的div中的元素？

回答

相關問題