0

我有一组图像，我想以类似网格的方式排列它们。我希望在全宽显示器上每行 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>

我对每张图像和每第六个标签重复此代码，我使用 margin-right: 0px 并且在第六个<div>标签之后，我必须使用它<br>来将其他图像带到全宽显示器的下一行。

问题是在标签/智能手机上只显示一个图像，即使有足够的空间再放两张。下一个图像向下移动。第六和第七图像相互粘在一起，没有任何空间。

4

1 回答 1

0

使用无序列表作为容器，而不是 DIV。（假设照片宽度为 100 像素）

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

相应地调整边距

于 2013-09-12T18:31:43.740 回答