【復活求む!】惜しくも解散してしまったバンド|J-ROCK編 >>

現在、wordpressでサイト作成をしています。
分からない箇所があるので質問です。

サイトのトップページに4枚同サイズの画像を載せる予定です。
PC表示は4枚一列に、スマホ表示は2枚1列で2段で表示したいのですが、
スマホサイトが上手くいきません。
テンプレートはTCD019を使用しており、下記の内容はコピペしながら作成しました。

現状は、スマホサイトの画像の縮尺はいいのですが、すべて縦に並んでしまっています。
同じサイズで隙間を少しあけ、2枚隣り合うように並べたいです。
どなたかアドバイスをお願いします。

インデックス部分
<div id="●●">
<ol class="clearfix">
<?php for($i = 1; $i <= 4; $i++): ?>
<?php if (!empty($options['●●_image'.$i])) { ?>
<li class="num<?php echo $i; ?>">
<a class="image" href="<?php echo ($options['●●_url'.$i]); ?>"
<?php if ($options['●●_target'.$i]){ echo ' target="_blank"'; }; ?>>
<img src="<?php esc_attr_e( $options['●●_image'.$i] ); ?>" alt="" /></a>
</li>
<?php }; ?>
<?php endfor; ?>
</ol>
</div>

PC用CSS部分
#●● ol {margin:0 0 5px 0; padding:0;}
#●● ol li { list-style-type:none; margin:0; padding:0; float:left; margin:0 5px 0 0; }
#●● ol li.num4 { margin:0; }
#●● img { display:block; }

スマホ用CSS部分
#●● ol {margin:0 0 5px 0; padding:0;}
#●● ol li {list-style: none; margin-left:0; margin-right:5px; }
#●● img {width:45%; height:auto; }

共通CSS部分
/* ---------- clearfix hack ---------- */
.clearfix:after { content: "."; display:block; clear:both; height:0;
font-size:0.1em; line-height:0; visibility:hidden; overflow:hidden; }
.clearfix { display:inline-block; }
/* exlude MacIE5 \*/
* html .clearfix { height:1% }
.clearfix { display:block;}
/* end MacIE5 */


宜しくお願い致します。

このQ&Aに関連する最新のQ&A

A 回答 (2件)

ANo1です。



スマホ環境がないのでPCで確認しているのですが、2列になりますけどね・・・

ひょっとして、2列に表示するだけの幅がなくて下に送られてるってことはないでしょうか?
画像をさらに小さくしてみても縦に並んでしまいますか?
それでも縦に並ぶようだと、nth-childが効かないってことかな。
    • good
    • 0

こんにちは



li要素はブロック要素なので、縦に並ぶのが普通です。
御提示のPC用のCSSではそれを横並びにするために、float:left;を用いていますよね?

ブロック要素を横に並べる方法に関して、ご参考までに…
https://www.halawata.net/2011/10/css-float-displ …


ご提示の方法に沿って行うなら…
 ol li { float:left; }
 ol li:nth-child(odd) { clear:left; }
なんてのではどうでしょうか?
    • good
    • 0
この回答へのお礼

つらい・・・

こんにちは!回答ありがとうございます!
教えていただいた方法試してみましたが、一回り画像が小さくなるだけで、縦並びはそのままでした。。
もし他に案があればいろいろ試してみたいので、引き続きよろしくお願い致します。

お礼日時:2016/09/01 15:18

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード


人気Q&Aランキング