5

Twitter Bootstrap に基づいた単純な 3 列のレイアウトがあります。唯一の問題は、各柱が異なる高さのブロックから組み立てられていることです。

<div class="container">
    <div id="blocks" class="row">
        <div class="span4">
            <div class="block" id="block1">
            <div class="block" id="block4">
            <div class="block" id="block7">
        </div>
        <div class="span4">
            <div class="block" id="block2">
            <div class="block" id="block5">
            <div class="block" id="block8">
        </div>            
        <div class="span4">
            <div class="block" id="block3">
            <div class="block" id="block5">
            <div class="block" id="block9">
        </div>
    </div>
</div>

こちらです.

小さなディスプレイを除いて、それは非常にうまく機能します。その場合、ブロックの順序はソートされません。

小さいディスプレイで

JavaScript なしでソートされたブロックを実現する方法はありますか?

4

3 に答える 3

0

これを達成するのは非常に難しいでしょう。float: left; を使用して単一のリストをいじりたいかもしれません。または表示: インラインブロック;

また

css 内に @media を含む 2 セットのリストを作成できるため、選択した div を表示または非表示にできる画面サイズに応じて異なります

CSS の例

@media screen and (min-width: 768px) and (max-width: 1024px) {
.displayFullScreen {display: block;}
.displayMobileScreen {display: none;}
}


@media screen and (max-width: 767px) {
.displayFullScreen {display: none;}
.displayMobileScreen {display: block;}
}
于 2013-05-13T10:48:05.630 に答える