WEB レイアウト

Question

うまく説明できないので、画像を貼り付けました。
青い部分が画像の想定です。

PC画面サイズでは、右に画像、左側に文章と画像の下にも文章が続くようなレイアウト。スマホ画面サイズでは、文章が上で、画像が下になるレイアウト。
（縦の幅は文章の長さによって異なります。）

レスポンシブで画面サイズによって変わるようにしたいのですが、良い方法ありますでしょうか？

Answer 1

<div class="box">
 <div class="box-img"><img src="xxxx.jpg"></div>
 <div class="box-text">
  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
 </div>
</div>

/*PC向け*/
.box {
  overflow:hidden;/*簡易clearfix*/
}
.box-img {
  float:right;
}
.box-text,
.box-text p {
  display:inline;/*テキストが回り込むようにインライン化*/
}
/*SP向け*/
@media screen and (max-width: 640px) {
 .box {
  display:table; /*仮想テーブル化*/
  width: 100%;
  }
  .box-img {
    float:none;
    display: table-footer-group; /*tfoot要素化→table要素の一番に下に行く*/
  }
  .box-txt,
  .box-txt p {
    display:block; 
  }
}

例えばこんな感じで上下入れ替えたりするのもアリかなーと思います。
テキストと画像の上下入れ替えはflexboxのorderプロパティでもできるかな。

###flexboxの場合

flexboxの場合も入れておきます。（※旧ブラウザへのプレフィクス対応は省略）

@media screen and (max-width: 640px) {
 .box {
  display:flex; /*flexboxレイアウト*/
  flex-direction: column; /*縦並び*/
  }
  .box-img {
    float:none;
    order: 2; /*表示順を2番目に変更*/
  }
  .box-txt {
    order: 1; /*表示順を1番目に変更*/
  }
  .box-txt,
  .box-txt p {
    display:block; /*ボックスを元に戻す*/
  }
}

Comments

[退会済みユーザー]

table-footer-groupなんてあるんですね、知りませんでした。
試してみます。ありがとうございます。