div's の子供の順序を逆転させる。

純粋なCSSでdiv'の子の順序を逆にするにはどうすればよいですか？

例えば

私は

<div id="parent">
    <div>A</div>
    <div>B</div>
    <div>C</div>
    <div>D</div>
</div>

と表示されるようにします。

D

C

B

A

JSfiddleにデモを作りました。 http://jsfiddle.net/E7cVs/2/

プログラミング
html css
4日 6月 2013 в 1:07
まだビューはありません

CSSのみの解決策: ( 起こりうる特異性の問題に対処しないために、すべてのセレクタをクラスセレクタに切り替えました。あくまで私や他の人の癖ですが。また、この例に関係のないスタイルは削除しました。)

.top-to-bottom {
    position: absolute;
}

.child {
    width: 50px;
    height: 50px;
    margin-top: -100px; /* height * 2 */
}

.child:nth-child(1) {
    margin-top: 150px; /* height * ( num of childs -1 )  */
}

.a {
    background:blue;

}
.b {
    background:red;
}

.c {
    background:purple;
}

.d {
    background:green;
}

Demo: http://jsfiddle.net/zA4Ee/3/

Javascript の解決策:。

var parent = document.getElementsByClassName('top-to-bottom')[0],
    divs = parent.children,
    i = divs.length - 1;

for (; i--;) {
    parent.appendChild(divs[i])
}

デモ: http://jsfiddle.net/t6q44/5/

banzomaikaka
編集した答え 4日 6月 2013 в 2:26
解説 (3)

純粋なCSSでも可能ですが、大きな注意点があります。以下の方法のいずれかを使ってみてください。どちらも欠点があります。

1.1. divを右寄せにする。これは、要素が水平に表示される場合にのみ有効です。また、要素が右に移動してしまいます。クリアするか、通常のドキュメントフローに戻すとすぐに順番は元に戻ります。 2.2.絶対配置を使用する。これは、高さが定義されていない要素にとっては厄介なことです。

右に浮かせると、水平方向に表示される順番が逆になります。[jsFiddleのデモはこちら][1]。

<div id="parent">
    <div>A</div>
    <div>B</div>
    <div>C</div>
</div>

#parent div {
    float: right;
}

絶対位置は、通常のドキュメントフローから要素を分離し、あなたが選択したとおりに正確に配置することができます。これは[フィドルデモ][2]です。

Mohamad
編集した答え 4日 6月 2013 в 1:25
解説 (11)

アブソリュートポジションと左上を使用

解説 (4)