6

既出・回答ありましたら申し訳ありません。

CSSでレスポンシブレイアウトのサイトを組んでいます。
PCサイト表示時は2カラムレイアウト、スマホサイズで1カラムになる構成になっています。

レイアウト変更

上図の左側がPC表示時、右側がスマホ表示時になります。
現在上側の構成になっているのですが、下側の順に表示順を変更して欲しいと言う依頼がありました。

<div>
　<div style="float:left;">
　　<p>A</p>
　　<p>B</p>
　</div>
　<div style="float:right;">
　　<p>C</p>
　</div>
</div>

簡単に書くと上記構造になっています。
この構造でCをスマホ時に2番目に表示する方法がどうしてもわかりませんでした。

floatを使わずpositionで絶対表示にし、ordinal-groupで並べ替える方法も考えてはみたのですが、AとBの高さが可変である為、巧く行きませんでした。

どなたか、解決方法ご教授頂けませんでしょうか？
宜しくお願い致します。

supa
  • 5,381
  • 4
  • 17
  • 41
user9396
  • 63
  • 1
  • 3

3 Answers3

8

かなり hacky + 綺麗に見せるにはもう何手間か要ると思いますが、トップ要素を relative にし、 B を absolute にして top: 100% とすることで C の下に配置できます。 トップ要素には A と C だけが格納され、その下に B の上部を設定するイメージです。あとは下記のコードを試してみてください。

/* この回答のキモ */
.root {
    position: relative;
}
.B {
    position: absolute;
    top: 100%;
    width: 100%;
}

/* それっぽく見せるための装飾 */
.A {
    background-color: #ffcccc;
    height: 100px;
}
.B {
    background-color: #ccffcc;
    height: 200px;
}
.C {
    background-color: #ccccff;
    height: 400px;
}
div {
    margin: 0;
    padding: 0;
}
<div class='root'>
    <div>
        <div class='A'>A</div>
        <div class='B'>B</div>
    </div>
    <div>
        <div class='C'>C</div>
    </div>
</div>
KoRoN
  • 5,182
  • 1
  • 16
  • 35
  • これは素晴らしいテクニックですね！何故これで実現可能なのか未だにわからないので、勉強させて頂いてます。 – tutinoco Apr 20 '15 at 10:39
  • Bの要素をposition:absolute;に指定することで、rootの高さがAとCの高さの合計になり、BのTOPに100%を指定することでrootの高さぶんB要素が下るということなのですね！ようやく把握できました。 – tutinoco Apr 20 '15 at 20:19
  • Robby Cornelissenさん tutinocoさん ページ数が少なければ構造変更も考えたのですが、影響する箇所がかなり多かったので、対処法悩んでいました。 次回からアドバイス分を参考に、最初の組み方から考えて、柔軟に対処出来るようにします。ありがとうございました！

    KoRoNさん このhack表示は初めて見ました。試してみたのですが、問題無く表示されました。tutinocoさんの補足も合わせて、勉強になりました。 調整箇所は出そうですが、一旦突発問題には対処できそうです。ありがとうございました！

    皆さま、今回は本当にありがとうございました。 急な話で困っていましたので助かりました。

     – user9396 Apr 21 '15 at 00:56
2

構造を下記のように変更したらどうでしょうか？

<div style="float:left;">
  <p>A</p>
</div>
<div style="float:right;">
  <p>C</p>
</div>
<div style="float:left; clear: left;">
  <p>B</p>
</div>
Robby Cornelissen
  • 1,388
  • 8
  • 21
2

HTMLの構造を修正したほうが良いと思われます。

まず、AとB、そしてCのボックスをdivで囲うのを止め、以下のようにします。

<div class='container'>
  <div class='a'>A</div>
  <div class='c'>C</div>
  <div class='b'>B</div>
</div>

殆どのPCサイトの場合、ページ全体の横幅が決められていることが多いと思いますので、それを上手く利用します。

仮に、ページ全体の横幅を600pxに指定してみました。（＊ 以降のCSSはPCのみ適応する）

.container {
    width: 600px;
}

そして、「A、B」と「C」の幅の合計がコンテナと同じ600pxになるようにし、「A、B」にfloat: left;、「C」にはfloat: right;を指定します。

.a, .b {
    width: 200px;
    float: left;
}

.c {
    width: 400px;
    float: right;
}

これで、スマートフォンではHTMLの通りACBの順に表示され、PCでは中間要素の「C」のみ各要素の右側に「AB」に影響を与えること無く表示させることができます。

こちらにサンプルを作成させていただきました。

なお、CSS3の新機能ですが、display:flex;とorder:x;を利用することでHTMLの表示順に関係なくコンテンツの位置を入れ替えることが可能になっているようです。

flex-boxの詳細についてはこちらの記事がとてもわかり易いです。

tutinoco
  • 1,201
  • 7
  • 10