HTML
1<div class="box">
2 <div class="box-img"><img src="xxxx.jpg"></div>
3 <div class="box-text">
4 <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
5 <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
6 </div>
7</div>
CSS
1/*PC向け*/
2.box {
3 overflow:hidden;/*簡易clearfix*/
4}
5.box-img {
6 float:right;
7}
8.box-text,
9.box-text p {
10 display:inline;/*テキストが回り込むようにインライン化*/
11}
12/*SP向け*/
13@media screen and (max-width: 640px) {
14 .box {
15 display:table; /*仮想テーブル化*/
16 width: 100%;
17 }
18 .box-img {
19 float:none;
20 display: table-footer-group; /*tfoot要素化→table要素の一番に下に行く*/
21 }
22 .box-txt,
23 .box-txt p {
24 display:block;
25 }
26}
例えばこんな感じで上下入れ替えたりするのもアリかなーと思います。
テキストと画像の上下入れ替えはflexboxのorderプロパティでもできるかな。
###flexboxの場合
flexboxの場合も入れておきます。(※旧ブラウザへのプレフィクス対応は省略)
CSS
1@media screen and (max-width: 640px) {
2 .box {
3 display:flex; /*flexboxレイアウト*/
4 flex-direction: column; /*縦並び*/
5 }
6 .box-img {
7 float:none;
8 order: 2; /*表示順を2番目に変更*/
9 }
10 .box-txt {
11 order: 1; /*表示順を1番目に変更*/
12 }
13 .box-txt,
14 .box-txt p {
15 display:block; /*ボックスを元に戻す*/
16 }
17}
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2016/10/05 14:45