responsive-design - レスポンシブ デザイン: フローティング ブロック

Question

私が見た特定の効果を行う方法に興味があります...

http://hype.co.uk

それが彼らが3番目の小さな列を取得する方法です（3番目の薄い列が存在するまでブラウザのサイズを変更します）...これが私にとって興味深い理由は、それが独自の列divにあると思うからですが、縮小すると2 列まで、小さなブロックはリフローしてメインのフローティング div リストに戻ります。

だから私の質問...特定のサイズで、小さいブロック要素を独自の列にどのように引き出しますか?

ありがとう ：）

Answer 1

彼らの css を (一番下に向かって) 見ると、彼らが使用していることがわかりますmedia queries。これは、ブラウザの幅を変更するユーザーに「対応」する方法です。このような場合、浮動要素またはその他の多くのものをクリアするだけかもしれません。これをチェックすることをお勧めします: http://www.html5rocks.com/en/mobile/responsivedesign/

ここでは、開始するための基本的な例を示します。ページのサイズを変更して、フローティング div が変更されていることを確認します。

CSS:

#pagewrap {
    padding: 5px;
    width: 960px;
    margin: 20px auto;
}

#content {
    width: 290px;
    float: left;
    padding: 5px 15px;
}

#middle {
    width: 294px;
    float: left;
    padding: 5px 15px;
    margin: 0px 5px 5px 5px;
}

#sidebar {
    width: 270px;
    padding: 5px 15px;
    float: left;
}

/* for 700px or less */
@media screen and (max-width: 600px) {

    #content {
        width: auto;
        float: none;
    }

    #middle {
        width: auto;
        float: none;
        margin-left: 0px;
    }

    #sidebar {
        width: auto;
        float: none;
    }

}

HTML:

<div id="pagewrap">
<div id="content">
    CONTENT
</div>
<div id="middle">
    MIDDLE
</div>
<div id="sidebar">
    SIDEBAR
</div>
</div>