[分享]css两列图片列表布局

在网页设计中，图片列表的布局是一个常见的设计模式。可以使用HTML和CSS来实现这个布局。这篇文章将介绍如何使用CSS实现两列图片列表布局。HTML代码如下： 图片1 图片2 图片3...

在网页设计中，图片列表的布局是一个常见的设计模式。可以使用HTML和CSS来实现这个布局。这篇文章将介绍如何使用CSS实现两列图片列表布局。

HTML代码如下：
<div class="image-list">
  <div class="item">
    <img src="image1.jpg" alt="">
    <p>图片1</p>
  </div>
  <div class="item">
    <img src="image2.jpg" alt="">
    <p>图片2</p>
  </div>
  <div class="item">
    <img src="image3.jpg" alt="">
    <p>图片3</p>
  </div>
  <div class="item">
    <img src="image4.jpg" alt="">
    <p>图片4</p>
  </div>
</div>

CSS代码如下：
.image-list {
  display: flex;
  flex-wrap: wrap;
}
.item {
  width: 50%;
  box-sizing: border-box;
  padding: 5px;
}
.item img {
  width: 100%;
  height: auto;
}
.item p {
  margin: 5px 0;
} 

以上是使用CSS实现两列图片列表布局的简单示例代码。实现思路是将整个图片列表容器使用CSS的flex属性设置为弹性布局，并使用flex-wrap属性让图片超出容器宽度后自动换行。每个图片项使用CSS的width属性设置为50%的宽度，使用box-sizing属性设置为border-box，使它的padding和border不会影响到它的宽高。图片使用CSS的width属性设置为100%的宽度让它自适应容器宽度，使用height属性为auto使其高度根据宽度自动调整。图片下方的文字描述通过CSS的margin属性设置合适的间距来呈现。

总的来说，使用CSS实现图片列表布局是一种简单和有效的方式，可以让网页的设计变得更加美观和清晰。