html - ウィンドウ サイズに応じて幅が変化する場合、個別の div にある要素をどのように揃えますか?

Question

検索入力と結果要素があります。どちらも別々の div/container にありますが、ウィンドウ サイズが変更されたときに整列する必要があります。Javascript よりも良い方法があると確信しています。

1 つのウィンドウ サイズ: http://i.imgur.com/KSmKsFL.png 小さいウィンドウ: http://i.imgur.com/tSMQvdD.png

私はこれを使用しています: http://getuikit.com/docs/utility.html気に入っていますが、レスポンシブデザインに関しては明らかに何か間違っています。画面の幅に関係なく、2 つの要素を揃えるのはそれほど難しいことではありません。助言がありますか？

私の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

Answer 1

CSS の使用:

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