css样式 如何实现文字在图片下面 一行三四张图片

如何实现如图 上面是图片 下面是文字 一张图片及其对应的文字处于同一个article里

img

img

img

同学，这个用简单的flex布局即可实现，float也OK，建议都学习一下(在菜鸟和W3C都有很全的讲解，flex可以看看阮一峰大神的总结)。
两种思路如下：


.pic1{
display:flex;
flex-direction:column;
}

//不要上面的，直接给img浮动一下：
.pic1 img{
float:left;
}

对你有帮助的话，麻烦采纳一下啦~
最后强调一遍，flex布局好处多多，建议赶紧学起来哦


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      width: 100%;
      height: 200px;
      display: flex;
      list-style: none;
    }

    ul>li {
      flex: 1;
      background: red;
      margin: 0 12px;
    }

    ul>li>img {
      width: 100%;
      height: 100px;
    }
  </style>
</head>

<body>
  <ul>
    <li>

      <img
        src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.rrppt.com%2Fuploads%2Fmoban%2F61963%2Fimg%2Flitpic.jpg&refer=http%3A%2F%2Fwww.rrppt.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642578311&t=413672184fd9b18eae3cfa3d8712518c"
        alt="">
      555
    </li>
    <li>

      <img
        src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.rrppt.com%2Fuploads%2Fmoban%2F61963%2Fimg%2Flitpic.jpg&refer=http%3A%2F%2Fwww.rrppt.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642578311&t=413672184fd9b18eae3cfa3d8712518c"
        alt="">
      555

    </li>
    <li>

      <img
        src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.rrppt.com%2Fuploads%2Fmoban%2F61963%2Fimg%2Flitpic.jpg&refer=http%3A%2F%2Fwww.rrppt.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642578311&t=413672184fd9b18eae3cfa3d8712518c"
        alt="">
      555

    </li>
    <li>

      <img
        src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.rrppt.com%2Fuploads%2Fmoban%2F61963%2Fimg%2Flitpic.jpg&refer=http%3A%2F%2Fwww.rrppt.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642578311&t=413672184fd9b18eae3cfa3d8712518c"
        alt="">
      555

    </li>
  </ul>
</body>

</html>

https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html