88

レスポンシブ デザインのために2 つの場所を交換しようとしてdivいます (ブラウザの幅によってサイトの外観が異なります/モバイルに適しています)。

今、私はこのようなものを持っています:

<div id="first_div"></div>
<div id="second_div"></div>

second_divしかし、CSS のみを使用して、配置を入れ替えて最初のように見せることは可能でしょうか? HTMLはそのままです。フロートなどを使用してみましたが、思い通りに動作しないようです。divs の高さは常に変化するため、絶対配置は使用したくありません。解決策はありますか、それともこれを行う方法はありませんか?

4

10 に答える 10

39

受け入れられた回答はほとんどのブラウザで機能しましたが、何らかの理由で iOS Chrome および Safari ブラウザで 2 番目に表示されるはずのコンテンツが非表示になりました。コンテンツを互いに積み重ねるように強制する他のいくつかの手順を試しましたが、最終的に、積み重ねられたコンテンツや非表示のコンテンツのバグなしで、意図した効果 (モバイル画面でコンテンツの表示順序を切り替える) を提供する次の解決策を試しました。

.container {
  display:flex;
  flex-direction: column-reverse;
}

.section1,
.section2 {
  height: auto;
}
于 2016-06-10T18:48:03.137 に答える
33

この質問にはすでに素晴らしい答えがありますが、ここですべての可能性を探るという精神で、絶対配置方法とは異なり、dom 要素を並べ替えながらスペースを占有できるようにする別の手法があります。

この方法は、最新のすべてのブラウザーと IE9+ (基本的に、display:table をサポートするすべてのブラウザー) で機能しますが、最大 3 つの兄弟でしか使用できないという欠点があります。

//the html    
<div class='container'>
    <div class='div1'>1</div>
    <div class='div2'>2</div>
    <div class='div3'>3</div>
</div>

//the css
.container {
   display:table;    
}
.div1 {
    display:table-footer-group;
}
.div2 {
    display:table-header-group;
}
.div3 {
    display:table-row-group;
}

これにより、要素が 1,2,3 から 2,3,1 に並べ替えられます。基本的に、表示が table-header-group に設定されているものはすべて上部に配置され、table-footer-group は下部に配置されます。当然、table-row-group は要素を真ん中に置きます。

この方法は迅速で優れたサポートがあり、必要な css はフレックスボックス アプローチよりもはるかに少ないため、たとえばモバイル レイアウト用にいくつかのアイテムを交換するだけの場合は、この手法を除外しないでください。

codepen でライブ デモを確認できます: http://codepen.io/thepixelninja/pen/eZVgLx

于 2015-10-27T01:53:28.403 に答える
8

CSS のみを使用する:

#blockContainer {
display: -webkit-box;
display: -moz-box;
display: box;

-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
}
#blockA {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
box-ordinal-group: 2;
}
#blockB {
-webkit-box-ordinal-group: 3;
-moz-box-ordinal-group: 3;
box-ordinal-group: 3;

}

<div id="blockContainer">
 <div id="blockA">Block A</div>
 <div id="blockB">Block B</div>
 <div id="blockC">Block C</div>
</div>

http://jsfiddle.net/thirtydot/hLUHL/

于 2016-12-04T15:49:46.217 に答える
5

それらに続くものは何もないと仮定する

これらの 2 つのdiv要素が基本的にメインのレイアウト要素であり、html でそれらに続くものがない場合、このフィドルに示されている通常の順序を取り、このフィドルに示されているように垂直方向に反転できる純粋な HMTL/CSS ソリューションがあります。次のdivような1 つの追加ラッパー:

HTML

<div class="wrapper flipit">
   <div id="first_div">first div</div>
   <div id="second_div">second div</div>
</div>

CSS

.flipit {
    position: relative;
}
.flipit #first_div {
    position: absolute;
    top: 100%;
    width: 100%;
}

要素がこれらの div に続く場合、これは機能しません。このフィドルは、次の要素がラップされていない場合の問題を示しています(それらは によってオーバーラップされ#first_divます)。このフィドルは、次の要素もラップされている場合の問題を示してい#first_divます(両方の#second_div および次の要素)。そのため、ユースケースによっては、この方法が機能する場合と機能しない場合があります。

他のすべての要素が 2 つの div 内に存在する全体的なレイアウト スキームでは、機能します。他のシナリオでは、そうではありません。

于 2013-07-03T20:26:41.370 に答える
1

両方の要素の幅が 50% であると仮定すると、使用したものは次のとおりです。

CSS:

  .parent {
    width: 100%;
    display: flex;
  }  
  .child-1 {
    width: 50%;
    margin-right: -50%;
    margin-left: 50%;
    background: #ff0;
  }
  .child-2 {
    width: 50%;
    margin-right: 50%;
    margin-left: -50%;
    background: #0f0;
  }

html:

<div class="parent">
  <div class="child-1">child1</div>
  <div class="child-2">child2</div>
</div>

例: https://jsfiddle.net/gzveri/o6umhj53/

ところで、このアプローチは、要素の長いリスト内の任意の 2 つの近くの要素に対して機能します。たとえば、行ごとに 2 つの項目を持つ要素の長いリストがあり、リスト内の 3 番目と 4 番目の要素をそれぞれ入れ替えて、チェス スタイルで要素をレンダリングしたい場合は、次のルールを使用します。

  .parent > div:nth-child(4n+3) {
    margin-right: -50%;
    margin-left: 50%;
  }
  .parent > div:nth-child(4n+4) {
    margin-right: 50%;
    margin-left: -50%;
  }
于 2020-07-05T23:55:48.367 に答える
0

派手なものは必要ありません。2 番目の div のコピーを作成し、一番上に配置します。このような

<div id="second_div_copy"></div>
<div id="first_div"></div>
<div id="second_div"></div>

最初の div を一番上に表示する場合は、second_div_copy display: none を指定します。2 番目の div を一番上に表示する場合は、second_div_copy display: ブロックと second_div display: none を指定します。

それは本当に簡単です。または、何か不足していますか？

于 2021-12-28T09:28:02.053 に答える
0

昨日、同じ問題が発生しました。私の場合、グリッド領域はうまくいきました：

.content-body {
    display: grid;
    grid-template-areas: " left right ";
    grid-template-columns: 1fr 1fr;
}
.first_div {
    grid-area: right;
}
.second {
    grid-area: left;
}
于 2021-10-02T09:25:11.397 に答える