web-dev-qa-db-ja.com

CSSでdivを並べ替えるにはどうすればいいですか？

他の要件のためにHTMLを変更できないテンプレートがある場合、HTML内でdivを別のdivより上に表示（並べ替え）するにはどうすればよいですか。両方のdivには、高さと幅が異なるデータが含まれています。

<div id="wrapper">
    <div id="firstDiv">
        Content to be below in this situation
    </div>
    <div id="secondDiv">
        Content to be above in this situation
    </div>
</div>
Other elements

うまくいけば、それは望ましい結果がであることは明らかです：

Content to be above in this situation
Content to be below in this situation
Other elements

寸法が固定されている場合は、必要な場所に簡単に配置できますが、内容が可変である場合についてはいくつかのアイデアが必要です。このシナリオでは、幅を両方とも100％にしてください。

私は特にCSSのみの解決策を探しています（そしてそれがうまくいかなければおそらく他の解決策でも満たす必要があるでしょう）。

これに続く他の要素があります。私が示した限られたシナリオを考えれば、良い提案が述べられています - それが最善の答えかもしれませんが、私はまたこれに続く要素が影響を受けないことを確かめています。

htmlcsscss3
238
devmode

これ 解決策 はCSSのみを使用しており、変数の内容を扱う

#wrapper   { display: table; }
#firstDiv  { display: table-footer-group; }
#secondDiv { display: table-header-group; }
263
Jordi

CSSのみの解決策（ IE10 + に対応） - Flexboxのorderプロパティを使う

デモ： http://jsfiddle.net/hqya7q6o/596/

#flex { display: flex; flex-direction: column; }
#a { order: 2; }
#b { order: 1; }
#c { order: 3; }
<div id="flex">
   <div id="a">A</div>
   <div id="b">B</div>
   <div id="c">C</div>
</div>

詳細情報： https://developer.mozilla.org/en-US/docs/Web/CSS/order

178
Justin

他の人が言っているように、これはあなたがCSSでやりたいことではありません。絶対位置と奇妙なマージンでそれを欺くことができますが、それは堅牢なソリューションではありません。あなたの場合の最善の選択肢は、JavaScriptを有効にすることです。 jQueryでは、これは非常に簡単な作業です。

$('#secondDiv').insertBefore('#firstDiv');

またはより一般的に：

$('.swapMe').each(function(i, el) {
    $(el).insertBefore($(el).prev());
});
77
nickf

これはFlexboxを使って行うことができます。

表示：flexとの両方を適用するコンテナを作成します。flex-flow：column-reverse.

/* -- Where the Magic Happens -- */

.container {
  
  /* Setup Flexbox */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  /* Reverse Column Order */
  -webkit-flex-flow: column-reverse;
  flex-flow: column-reverse;

}


/* -- Styling Only -- */

.container > div {
  background: red;
  color: white;
  padding: 10px;
}

.container > div:last-of-type {
  background: blue;
}
<div class="container">
  
  <div class="first">

     first

  </div>
  
  <div class="second">

    second

  </div>
  
</div>

出典：

33
BlakePetersen

Flexbox以前のユーザーエージェントをサポートしながらCSSだけであなたが望むことを達成する方法は全くありません（ ほとんどの場合古いIE ） - ：

  1. あなたは各要素の正確なレンダリングされた高さを知っています（もしそうなら、あなたは絶対に内容を配置することができます）。動的に生成されたコンテンツを扱っているのなら、あなたは運が悪いです。
  2. あなたはこれらの要素の正確な数がわかるでしょう。繰り返しますが、動的に生成されるいくつかのコンテンツの塊に対してこれを実行する必要がある場合、特に3つ以上ある場合は、運が悪くなります。

もし上記が真実なら、あなたは絶対に要素を配置することによってあなたが望むことをすることができます - 

#wrapper { position: relative; }
#firstDiv { position: absolute; height: 100px; top: 110px; }
#secondDiv { position: absolute; height: 100px; top: 0; }

繰り返しになりますが、少なくとも#firstDivに必要な高さがわからない場合は、CSSだけでは望みどおりのことができません。このコンテンツのいずれかが動的な場合は、JavaScriptを使用する必要があります。

26
Matt Howell

これが解決策です。

<style>
#firstDiv {
    position:absolute; top:100%;
}
#wrapper {
    position:relative; 
}

しかし、私はあなたがラッパーdivに続くいくつかのコンテンツを持っていると思います...

16
buti-oxa

CSS3 flexboxのレイアウトモジュールを使えば、divを注文できます。

#wrapper {
  display: flex;
  flex-direction: column;
}
#firstDiv {
  order: 2;
}

<div id="wrapper">
  <div id="firstDiv">
    Content1
  </div>
  <div id="secondDiv">
    Content2
  </div>
</div>
7
Arun Kumar M

あなたが知っている、または上限になる要素のサイズを強制できる場合は、次のようにします。

position : absolute;

あなたのCSSで、divにその位置を教えてください。

それ以外の場合は、JavaScriptが唯一の方法です。

fd = document.getElementById( 'firstDiv' );
sd = document.getElementById( 'secondDiv' );
fd.parentNode.removeChild( fd );
sd.parentNode.insertAfter( fd, sd );

または似たようなもの。

編集：私はちょうどこれが役に立つかもしれないことがわかった： W3文書CSS3移動

5
Kris

トップマージンがマイナスの場合はこの効果が得られますが、ページごとにカスタマイズする必要があります。たとえば、このマークアップ...

<div class="product">
<h2>Greatest Product Ever</h2>
<p class="desc">This paragraph appears in the source code directly after the heading and will appear in the search results.</p>
<p class="sidenote">Note: This information appears in HTML after the product description appearing below.</p>
</div>

...そしてこのCSS ...

.product { width: 400px; }
.desc { margin-top: 5em; }
.sidenote { margin-top: -7em; }

... 2番目の段落を最初の段落の上に引くことができます。

もちろん、イントロパラグラフが適切な量にジャンプするように手動であなたのCSSを異なる記述の長さに微調整する必要があるでしょう、しかしあなたが他の部分に対する制御とマークアップとCSSに対する完全な制御を制限するなら。

5
Carl Camera

ええ、ちょっと絶対的なポジショニングとちょっと危険なマージン設定で、私は近づくことができます、しかしそれは完全ではないかきれいではありません：

#wrapper { position: relative; margin-top: 4em; }
#firstDiv { position: absolute; top: 0; width: 100%; }
#secondDiv { position: absolute; bottom: 0; width: 100%; }

"margin-top：4em"は特に不快な部分です。このマージンはfirstDivのコンテンツの量に応じて調整する必要があります。あなたの正確な要求次第で、これは可能かもしれません、しかし私はとにかく誰かがしっかりした解決策のためにこれを築くことができるかもしれないことを望みます。

JavaScriptに関するEricのコメントはおそらく追求されるべきです。

4
Bobby Jack

これはCSSでのみ可能です。

この同様の質問に対する私の答えを確認してください。

https://stackoverflow.com/a/25462829/10772

私は自分の答えを二重に投稿したくはありませんが、それよりも短いのは、親がflexbox要素になる必要があるということです。例えば：

（ここでは、Webキットベンダーのプレフィックスのみを使用してください。）

#main {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}

それから、それらの順序を次のように指定してdivを入れ替えます。

#main > div#one{
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
    overflow:visible;
}

#main > div#two{
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
}
3
jansmolders86

あなたはこれが必要です！ cssでは、最初のdivを左または右にフロートさせます。 2番目のdivをfirstと同じように左または右にフロートさせます。 2番目のdivについては、上記の2 divと同じ左または右のクリア。例えば：

#firstDiv {
    float: left;
}

#secondDiv {
    float: left;
    clear: left;
}

私の友達を楽しんでください。

3
Reza Amya

より大きなブラウザをサポートするソリューション、それからflexbox（IE≥9で動作します）：

#wrapper {
  -webkit-transform: scaleY(-1);
  -ms-transform: scaleY(-1);
  transform: scaleY(-1);
}
#wrapper > * {
  -webkit-transform: scaleY(-1);
  -ms-transform: scaleY(-1);
  transform: scaleY(-1);
}
<div id="wrapper">
    <div id="firstDiv">
        Content to be below in this situation
    </div>
    <div id="secondDiv">
        Content to be above in this situation
    </div>
</div>
Other elements

display: table;ソリューションとは対照的に、このソリューションは.wrapperが任意の数の子を持つ場合に機能します。

2
Finesse

私はモバイル版のためだけにdivの順序を変更する方法を探していたので、私はそれをうまくスタイルすることができます。 nickf replyのおかげで、私が欲しいもののためにうまくいったこのコードを作ることができました。

//  changing the order of the sidebar so it goes after the content for mobile versions
jQuery(window).resize(function(){
    if ( jQuery(window).width() < 480 )
    {
        jQuery('#main-content').insertBefore('#sidebar');
    }
    if ( jQuery(window).width() > 480 )
    {
        jQuery('#sidebar').insertBefore('#main-content');
    }
    jQuery(window).height(); // New height
    jQuery(window).width(); // New width
});
2
Jose Paitamala

display: flexとflex-direction : columnを指定して、親divにflexを使用するだけです。次に、orderを使用して、どちらの子divが最初に来るのかを判断します。

0
MUSTAPHA ABDULRASHEED