1

非常に複雑な方法でレンダリングする必要がある特定の順序の div のリストがある状況があります。簡単に言えば、これは私の HTML です。

<div>
    <div class="box">1 (first in list)</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="box">7</div>
    <div class="box">8</div>
    <div class="box">9 (last in list)</div>
</div>

sを表示する方法は、次のようにdiv、左から右に 4 行で、各行が下から上に積み上げられます。

9
5 6 7 8
1 2 3 4

私が求めているものを示す結果のフィドルを作成しました: http://jsfiddle.net/mpcjs/div - ただし、 HTML で s の並べ替えを必要としないソリューションが必要です。divまた、 の数は可変であることに注意してください。

これは可能ですか？CSS3/jQuery ソリューションは大歓迎です!

4

5 に答える 5

1

flexboxを調べる必要があります。これがどのように機能するかを示すフィドルです.Chromeでのみテストしたという警告があります.

.flex{
width:400px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap-reverse;
-ms-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
-webkit-box-pack: start;
-moz-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;}
于 2013-03-20T15:52:15.950 に答える
1

これは、jQuery プラグインjQuery Masonryを使用して可能です。

これを置き換えます（287行目から）

var position = {
  top: minimumY + this.offset.y
};

と

var position = (this.options.fromBottom) ? {
  bottom: minimumY + this.offset.y
} : {
  top: minimumY + this.offset.y
};

jsFiddle: http://jsfiddle.net/fnexE/

于 2013-03-20T15:52:37.903 に答える
1

これはまだ実行可能な解決策ではありませんが、クロムとサファリを使用するwriting-modeと CSS3 で使用できます。縦書きの w3-dev セクションを確認してください。

.row { 
  writing-mode: bt-rl; 
}
.box { 
  display: inline-block;
  vertical-align: top;
}

http://jsfiddle.net/mpcjs/4/

于 2013-03-20T16:08:44.060 に答える
0

下から DIV をスタックする方法がわかりませんが、これにより逆になります。

HTML:

<div>
    <div>
        <div class='box'>1</div>
        <div class='box'>2</div>
        <div class='box'>3</div>
        <div class='box'>4</div>
        <div class='box'>5</div>
        <div class='box'>6</div>
        <div class='box'>7</div>
        <div class='box'>8</div>
        <div class='box'>9</div>
    </div>
</div>

CSS:

.box{
    float:left;
    border:1px solid #000;
    width:22%;
    margin:1%;
}

jQuery:

$('div > .box').each(function() {
    $(this).prependTo(this.parentNode);
});
于 2013-03-20T15:52:57.717 に答える