web-dev-qa-db-ja.com

CSSを使用してfloatdivの順序を変更する

[〜＃〜] jsfiddle [〜＃〜]

特定のピクセルサイズでフロートdivの順序を変更したい。

デフォルトの状態では、両方の幅が50％で、隣り合っています。

600px未満の画面サイズ（またはw/eは関係ありません）2番目のdiv（赤いもの）を最初のdiv（黄色のもの）の上にフロートさせたいです。

これはCSSのみのソリューションでどのように可能ですか？

[〜＃〜] html [〜＃〜]

<div class="yellow"></div>
<div class="red"></div>

[〜＃〜] css [〜＃〜]

.yellow {
    background: yellow;
    width: 50%;
    height: 300px;
    float:left;
}

.red {
    background: red;
    width: 50%;
    height: 300px;
    float:left;
}

@media screen and (max-width:600px) {
    .yellow {
        background: yellow;
        width: 100%;
        height: 300px;
        float:left;
    }

    .red {
        background: red;
        width: 100%;
        height: 300px;
        float:left;
    }
}

私が望む解決策は次のとおりです。

RED DIV

イエローDIV

しかし今は：

イエローDIV

RED DIV

htmlcssresponsive-designmedia-queries
13
vaskort

フロートを使用してこれを実現する方法を尋ねていることは知っていますが、純粋なCSSを使用する限り、これは不可能です（少なくとも、やりたくないと言っている厄介な配置を使用しない限り）。

私の知る限り、純粋なHTML/CSSでこれを実現する唯一の良い方法は、新しい flexbox仕様 を利用することです（良い出発点はおそらく このcssトリックの記事 ）。

flexboxを使用すると、アイテムのorderプロパティを使用して、（duh）に表示される注文アイテムを指定できます。

この動作の例を見ることができます ここ 、HTMLコードはあなたが持っているものと似ていますが、ラッパー要素が追加されています（私はDOCTYPE宣言も修正しました）：

<!DOCTYPE html>
<div class="wrapper">
    <div class="yellow">
    </div>
    <div class="red">
    </div>
</div>

CSSは少し異なります：

.wrapper {
  display: flex;
  flex-flow: row wrap;
}

.yellow {
    background: yellow;
    width: 20%;
    height: 300px;
}

.red {
    background: red;
    width: 20%;
    height: 300px;
}

@media screen and (max-width:600px) {
    .yellow {
        order: 2;
        width: 100%;
    }

    .red {
        order: 1;
        width: 100%;
    }
}

また、少しクリーンアップしました。メディアクエリに重複したコードがあり、実際にそこにある必要はありませんでした。

これの唯一の欠点は、執筆時点で現在ブラウザの約80％でしか機能しないことです。

http://caniuse.com/#search=flexbox

対象となる市場によっては、適切な劣化を使用して、flexboxを完全にサポートしていないデバイスでの注文を除くすべての方法で正しく表示されるようにすることができます。

また、実際には、並べ替えを行うモバイルデバイスのみをターゲットにしていると思います。そこでのサポートは良いので、うまくいくかもしれません。

21
Sean

これは、負のマージンとフロートを使用した簡単なソリューションです。

CSSの場合、以下を使用します。

@media screen and (max-width:600px) {
    .yellow {
        background: yellow;
        width: 100%;
        height: 300px;
        float:left;
        margin-top: 300px;
    }

    .red {
        background: red;
        width: 100%;
        height: 300px;
        float:left;
        margin-left: -100%;
    }
}

HTMLは投稿したものと同じままです。

.yellow（赤いdivの高さに等しい）を使用して、margin-top: 300pxに上マージンを追加します。

赤いdivの場合、100％の負の左マージンを追加します。

これにより、赤いdivが黄色のdivの上に配置されますが、黄色のdivが上マージンになっているため、黄色のdivが赤いdivの下に飛び出します。

このトリックは、聖杯の3列のレイアウト設計に使用されるものと似ています。

デモを参照してください： http://jsfiddle.net/audetwebdesign/jux84wzk/

6
Marc Audet

あなたを変えてみてください

これへのHTML-

<div class="container">
  <div class="yellow"></div>
  <div class="red"></div>
</div>

そしてあなたの@mediaクエリCSSをこれに-

@media screen and (max-width:600px) {
.container{
    display:flex;
    flex-direction: column-reverse;
}
.yellow {
    background: yellow;
    width: 100%;
    height: 300px;

}

.red {
    background: red;
    width: 100%;
    height: 300px;


} }
6
Ramiz Wachtler

これまでのところ、モバイルファーストアンサーはありません。これは、CSSの行数が少ないことやその他の利点です。 これはhtmlに影響するので、OPの質問ではありません。CSSのみのアプローチの場合、他の2つの覗き見からのFlexbox回答です。投票しました。

デモ： http://jsfiddle.net/mhrf6d4n/

HTML、最初に最小のビューポートのソース順で配置：

<div class="red"></div>
<div class="yellow"></div>

CSS（メディアクエリの外部のすべてのビューポートに共有のグローバルを配置し、共有セレクターを組み合わせてから、最小幅を配置してフロートをそこに配置します）

.yellow, .red {
    background: yellow;
    height: 300px;
}
.red {
    background: red;
}

@media screen and (min-width:600px) {
    .yellow, .red {
        float:left;
        width:50%;
    }
}
2
Christina