0

グリッドのような方法で配置したい一連の画像があります。全幅モニターでは 1 行あたり 6 個が必要ですが、小さい画面 (タブ/スマートフォン) の場合、写真は自動的に配置されます。私は次のコードを試しました：

<div style="width: 120px; float: left; margin-bottom: 10px; margin-right: 40px; position: relative;">

[caption id="" align="alignnone" width="110"]<a href="http://www.mysite.com"><img class="size-full wp-image-76" alt="ALT Text" src="ImageSource.jpg" width="110" height="110" /></a> Image Caption[/caption]

</div>

画像ごとにこのコードを繰り返し、6 番目のタグごとに margin-right: 0px<div>を使用<br>します。

問題は、タブ/スマートフォンでは、さらに 2 つの画像を表示するのに十分なスペースがある場合でも、画像が 1 つしか表示されないことです。次の画像は下に移動します。そして、6 番目と 7 番目の画像は隙間なくくっつきます。

4

1 に答える 1

0

DIV ではなく、順序なしリストをコンテナーとして使用します。（写真の幅は100pxと仮定）

ul, li (margin:0;padding:0;list-style:none}    
ul {max-width: 600px;}
li {float-left; width:100px;}

それに応じて余白を調整します

于 2013-09-12T18:31:43.740 に答える