Question

我有一组想要以网格状排列的图像。我想在全宽显示器上每行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>将其他图像带到下一行在全宽度监视器上。

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

Answer 1

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

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

相应调整边距

使用<div> </div>在监视器和移动设备上以类似网格的方式排列图像

1 个答案: