純粋なCSSでdiv'の子の順序を逆にするにはどうすればよいですか?
例えば
私は
<div id="parent">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
</div>
と表示されるようにします。
D
C
B
A
JSfiddleにデモを作りました。
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:
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/
純粋な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]です。