6

cssのみを使用して、2つのdiv要素を逆順に表示することが可能かどうか疑問に思っています。HTML の変更や JavaScript コードはなく、CSS のみです。

私は次のhtmlを持っています:

<div id="container" class="clearfix">
    <div id="right-sidebar">Right</div>
    <div id="left-sidebar">Left</div>
</div>

そしてこの現在のcss：

#container {
    width: 200px;
    border: 2px solid blue;
    padding: 2px;
    margin: 0;
}

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

#left-sidebar, #right-sidebar {
    width: 150px;
    padding: 2px;
}

#left-sidebar {
    border: 2px solid red;
    float: left;
}

#right-sidebar {
    border: 2px solid green;
    float: right;
}

結果は、左の div の上にある右の div を示しています。コンテナのプロパティ（自動計算された高さ）を維持しながら、左のものを右のものの上に表示して、それらを交換したいと思います。

別の言葉で説明すると、html コードで 2 つの div を交換することで得られるのと同じ結果を、CSS だけを使用して実現したいと考えています。

cssだけでも可能ですか？[float:bottom プロパティを夢見ています :)]

http://jsfiddle.net/mT7JJ/1/

4

7 に答える 7

6

これや他の多くの人によると、cssだけで交換することはできないのではないかと心配していますが、この状況で役立つものを見つけました。それがこれです

したがって、これはフィドルでの編集になります

#container {
 display: table; width: 200px; 
 border:1px red solid;
}
#left-sidebar {
 display: table-header-group;
}
#right-sidebar {
 display: table-footer-group;
}
于 2013-07-03T18:28:23.970 に答える
2

私が考えることができる唯一の考えは、相対/絶対位置です。しかし、それは実際には効率的ではありません

于 2013-07-03T18:24:27.700 に答える
1

コメントされているように、最新のソリューションの 1 つはフレックス レイアウトです。

別のトリッキーな可能性は、変換を使用することです

Webkit デモ

コンテナを逆さまに回転させてから、内側のdivを回転させて見栄えを良くします。正味の効果を示すために、ホバーで行われます。ホバーは clearfix のために少し不安定ですが、これはここでは関係ありません。

#container:hover {
    -webkit-transform: rotateX(180deg);
}
#container:hover div {
    -webkit-transform: rotateX(180deg);
}

私は不可能と宣言された質問に答えるのを楽しんでいます :-)

于 2013-07-03T20:41:40.050 に答える
0 
<div id="container" class="clearfix">
    <div id="left-sidebar">Left</div>
    <div id="right-sidebar">Right</div>

</div>
#container {
    width: 200px;
    border: 2px solid blue;
    padding: 2px;
    margin: 0;
}

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

#left-sidebar, #right-sidebar {
    width: 150px;
    padding: 2px;
}

#left-sidebar {
    border: 2px solid red;

}

#right-sidebar {
    border: 2px solid green;

}

右のdivの上にあるこの左のdivを確認してください

于 2013-07-03T18:40:37.320 に答える