html - 当宽度随窗口大小而变化时，如何对齐单独 div 中的元素？

Question

我有一个搜索输入和一个结果元素。两者都在单独的 div/容器中，但我需要它们在窗口大小发生变化时对齐。我很确定有比使用 Javascript 更好的方法。

一个窗口大小： 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

Answer 1

使用 CSS：

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