在div中订购列表图片

Question

我尝试在div中列出一些图像，但图像仅在单行中列出，但是我想在多行中列出（我想在3张图像之后查看下一行图像），我的代码在此处列出

<?php
  foreach ($list as $row)
  {?>
    <div>
      <a href="<?php echo base_url("./resources/images/"); echo $row['image'];?>">
        <img src="<?php echo base_url("./resources/images/"); echo $row['image'];?>" alt="" />
      </a>
    </div>
  <?php 
  }
?>

请帮助，这是我的列表，我想要这样的列表

Answer 1

您可以通过使用float: left属性来实现这一目标，并且在第三个孩子之后，您只需申请clear: left;。根据您的需求，这将仅允许三个div连续出现。另外，如果可以的话，请检查一下flex-basis属性，该属性也可以解决您的问题。

这是一个可行的解决方案：

.child {
    background: grey ;
    height: 150px;
    float: left;
    margin:15px 0 0 15px;
    width:150px;
    
}
.child:nth-child(3n+1) {
    clear: left;   
}

<div class="wrapper">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>