html我在尝试一个布局容器内有三个块块里面的内容通常是img我希望他们的宽度始终保持一定比例121我该如何操作并解释原理

要实现容器内三个块的宽度保持一定比例（1:2:1），可以使用flexbox布局。以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      justify-content: space-between;
    }
    
    .block {
      flex: 1;
      margin: 10px;
    }
    
    .block img {
      width: 100%;
      height: auto;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="block">
      <img src="image1.jpg" alt="Image 1">
    </div>
    <div class="block">
      <img src="image2.jpg" alt="Image 2">
    </div>
    <div class="block">
      <img src="image3.jpg" alt="Image 3">
    </div>
  </div>
</body>
</html>

首先，我们创建一个类名为"container"的容器div，用于包含三个块。然后，我们使用flexbox布局将这个容器设为flex，并设置justify-content属性为space-between，这样三个块会在容器内均匀分布。

接下来，我们创建一个类名为"block"的div，作为每个块的容器。我们使用flex属性将每个块的大小设为相等，flex: 1表示每个块的宽度会根据可用空间平均分配。我们还为每个块添加了一些边距，以便在视觉上分隔它们。

最后，我们为每个块内的img元素设置了宽度为100%，高度自动适应，这样图片就可以根据容器的宽度按比例缩放。

这样，无论容器的宽度如何变化，三个块的宽度比例都会保持为1:2:1

html我在尝试一个布局容器内有三个块块里面的内容通常是img我希望他们的宽度始终保持一定比例121我该如何操作并解释原理