4

次の方法で 3 つの Div ボックス (実際には任意の数) を注文した場合:

<div>
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
</div>

htmlの構造を変えずに、oneid付きのdivの後にid付きのdivを表示するにはどうすればよいですか?three

これは、html が次のように表示されるべきものです。

________________________
| ____________________ |
| | id=two           | |
| |                  | |
| |__________________| |
| ____________________ |
| | id=three         | |
| |                  | |
| |__________________| |
| ____________________ |
| | id=one           | |
| |                  | |
| |__________________| |
|______________________|
4

4 に答える 4

5

それらのdivの後に来るものによっては可能です。そこに何もない場合position: absolute; top: 100%;は、最初の div で使用してそれを実現できます。

<div id="container">
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
</div>​​​

​#container { position: relative; border: 1px solid red; }
#one { position: absolute; top: 100%; }
#one, #two, #three { width: 300px; height: 200px; border: 1px solid #ccc; }

http://jsfiddle.net/xjnrE/

#containerただし、 divの後に何かがある場合は、それが下になります#one(少なくとも部分的に、高さによって異なります。 demoを参照してください)。

要素が「フロー内」にある (つまり、配置もフローティングもされていない) 場合、マークアップ (およびその結果として DOM) に表示される順序に従ってレンダリングされることに注意してください。つまり、DOM 内の要素の実際の位置を変更するには、JavaScript を使用する必要があります。

var container = document.getElementById('container');
var one = document.getElementById('one');
container.appendChild(one);

http://jsfiddle.net/xjnrE/3/

于 2012-08-22T23:43:47.730 に答える
1

div のサイズを制御し、それらのコンテンツがレイアウトを壊さないことが確実な場合は、css を使用して配置できます。少し厄介ですが、次のようなものです。

#one, #two, #three {
   position: absolute;
   width: 200px;
   height: 200px;
}
#one {
   top: 400px;
}
#two {
   top: 0px;
}
#three {
   top: 200px;
}

これらの位置は、必要に応じて JavaScript で変更できます。

于 2012-08-22T23:26:37.427 に答える
0

以下は、最初の DIV を取得し、それを移動して親コンテナーの最後の項目にします。

ただし、何らかの方法でコンテナー DIV をターゲットにできることを確認する必要があります。したがって、HTML を編集できない場合は、一意の ID またはクラスを持つ他の親要素に基づいて要素をターゲットにします。

マークアップ:

<div id="container">
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
</div>

JavaScript:

$('#container #one').appendTo('#container');
于 2013-04-15T18:18:22.690 に答える