Question

我需要在＆lt; ul＆gt;中的每一行中显示3个图像。标签。我有多个＆lt; ul＆gt;标签和每个＆lt; ul＆gt;标签，我显示6张图片。现在我必须显示3＆lt; li＆gt;在第一行和下一个3＆lt; li＆gt;在第二排。然后对于下一个＆lt; ul＆gt;同样如此。我需要在3＆lt; li＆gt;之后打破行。这是我的代码：

 <div class="sets">

    <?php  foreach ($sets as $set => $items) : ?>
        <ul class="set test-set">

        <?php  $i=0; foreach ($items as $thumb) : ?>

        <?php

            /* Prepare Image */
            $content = '<img src="'.$thumb['cache_url'].'" width="'.$thumb['width'].'" height="'.$thumb['height'].'" alt="'.$thumb['filename'].'" />';

        ?>
        <?php  if($i === 0): 
        echo '<li><div>'; ?>
        <?php endif; ?> 

        <?php echo $content; ?>

        <?php  if($i === 2):  $i = 0; ?>

        <?php else: $i++; endif; ?>
        </div></li>                 
        <?php endforeach; ?> 

    </ul>
    <?php endforeach; ?>

</div>

Answer 1

http://jsfiddle.net/z4Q48/

li{
  float: left;
}

li:nth-child(3n+4){
  clear: both;
}

请参阅http://css-tricks.com/how-nth-child-works/

如何在一行中显示3 <li> </li>

1 个答案: