web的难题，帮帮我

这个不知道怎么写

无标题文档

新品专区

X9s活力蓝
活力蓝新配色，预定好礼
$2698

<cml>

这个参考一下div弹性布局即可

这个没啥难度啊。一个大div.三个小的然后弹性布局

<!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;
    }
    .box {
      display: flex;
      width: 100%;
      height: 400px;
      justify-content: space-around;
      background: blue;
    }

    .box>.list-item {
      width: 32%;
      height: 100%;
      background:white;
    }
    .list-item img{
      width: 80%;
      height: 200px;
      margin:30px auto;
      display: block;
    }
    .name{
      width: 90%;
      height: 30px;
      line-height: 30px;
      text-align: center;
      border: 1px dashed red;
      margin: 12px auto;
      border-radius:5px ;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="list-item">
      <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fzkres1.myzaker.com%2F202110%2F615d7753b15ec03a1072d375_1024.jpg&refer=http%3A%2F%2Fzkres1.myzaker.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658918850&t=2405be485b2e2d737b1cd2255909ff0e" alt="">
      <div class="name">x9s 活力蓝</div>
      <div class="name">x9s 活力蓝</div>
      <div class="name">x9s 活力蓝</div>
    </div>
    <div class="list-item">
      <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fzkres1.myzaker.com%2F202110%2F615d7753b15ec03a1072d375_1024.jpg&refer=http%3A%2F%2Fzkres1.myzaker.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658918850&t=2405be485b2e2d737b1cd2255909ff0e" alt="">
      <div class="name">x9s 活力蓝</div>
      <div class="name">x9s 活力蓝</div>
      <div class="name">x9s 活力蓝</div>
    </div>
    <div class="list-item">
      <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fzkres1.myzaker.com%2F202110%2F615d7753b15ec03a1072d375_1024.jpg&refer=http%3A%2F%2Fzkres1.myzaker.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658918850&t=2405be485b2e2d737b1cd2255909ff0e" alt="">
      <div class="name">x9s 活力蓝</div>
      <div class="name">x9s 活力蓝</div>
      <div class="name">x9s 活力蓝</div>
    </div>
  </div>
</body>

</html>

div的flex布局完美解决