Question

我在php上查询从数据库中获取大量图像，我需要在第一行显示4个图像，在下一行显示其他4个图像，依此类推。

我以为我可以用帮助css做到这一点，但我不能=（

HTML

<div id="photo_block" style="border:2px dotted <?echo $color;?>; height:1000px;" >

    <?
        while ($item=$select_items->fetch()) {
    ?>

<ul class="items">
    <li>
        <div class="item_block">
            <img src="<?echo $item['src']?>">
        </div>
    </li>
</ul>

    <?
        }
    ?>

</div>

CSS

#photo_block{
    width:800px;
}
.items li{
    display: inline;
}
.items li .item_block img{
    width: 100px;
    height: 100px;
}

谢谢你的帮助！

Answer 1

您应该重置ul元素的填充和边距
您的img尺寸设置为100px，因此它们将在#photo_block内连续8次进入

如何：http://jsfiddle.net/4Ntzq/

Answer 2

为什么要为每个单独的图像创建一个包含一个项目的新列表？我根本不会使用列表，只是将它们一次放入div个，然后将图像缩放到（略低于）25％。

<div class='imagerow'>
<?
    $i = 0;
    while ($item=$select_items->fetch()) {
      if($i > 0 && $i % 4 == 0) {
?>
</div>
<div class='imagerow'>
<?
      } // end if
?>
 <img src="<?echo $item['src']?>">
<?
   } // end while
?>
</div>

使用CSS

.imagerow img { width: 24.75%; }

宽度只有25％，因为经验告诉我，如果你只花了25％，那么最后一个仍然会超出到下一行。

Answer 3

HTML

<div id="photo_block" style="border:2px dotted <?echo $color;?>; height:1000px;" >
<ul class="items">
   <? while ($item=$select_items->fetch()) { ?>
    <li>
      <div class="item_block">
         <img src="<?echo $item['src']?>">
       </div>
    </li>
   <? } ?>
</ul>
</div>

CSS

#photo_block{
    width:500px;
}
.items li{
    width:100px;
    margin-right:5px;
    float: left;
    list-style: none;
}
.items li .item_block img{
    width: 100px;
    height: 100px;
}

Answer 4

使用float: left;代替display: inline，然后添加一个新规则，每隔clear: left元素执行<li>。

<强> HTML：

<div id="photo_block" style="border:2px dotted <?echo $color;?>; height:1000px;" >

  <ul class="items">
    <? while ($item=$select_items->fetch()): ?>

    <li>
        <div class="item_block">
            <img src="<?echo $item['src']?>">
        </div>
    </li>

    <? endwhile ?>
  </ul>

</div>

<强> CSS：

#photo_block{
    width:800px;
}
.items li{
    float: left;
}
.items li:nth-child(4n)
{
    clear: left;
}
.items li .item_block img{
    width: 100px;
    height: 100px;
}

如何在一行上显示4 <li>而在另一行上显示4 </li> <li> </li>

4 个答案: