[分享]css3怎么让3张图片在一个div平均分

CSS3 是用于网页设计的强大工具，它能够让你以前难以实现的效果变得简单。在本文中，我们将介绍如何使用 CSS3 让三张图片在一个 div 中平均分布。 .imagecontainer { d...

CSS3 是用于网页设计的强大工具，它能够让你以前难以实现的效果变得简单。在本文中，我们将介绍如何使用 CSS3 让三张图片在一个 div 中平均分布。

<div class="image-container">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>

<style>
  .image-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .image-container img {
    width: calc(100% / 3 - 10px);
    margin-right: 10px;
  }
</style> 

上面是我们的 HTML 代码，在 div 中包含了三个 img 元素。接下来，我们需要使用 CSS3 将它们平均分布。

首先，我们使用 display: flex 将包含图片的 div 容器转变为 Flexbox 容器。然后使用 justify-content: space-between 强制元素平均分布。最后使用 align-items: center 将图片垂直居中。

接下来，我们给每个 img 元素设置宽度。我们使用 calc() 函数来计算出每个 img 元素应该占用的宽度。我们将 100% 分成三份，减去两个 img 元素之间的间距。我们设置 margin-right: 10px 让每个 img 元素右侧留出一些空隙。

现在运行代码，你会看到三张图片已经平均分布在 div 中了。

总结一下，通过使用 CSS3 的 Flexbox 和 calc() 函数，我们实现了让三张图片在一个 div 中平均分布的效果。这不仅让页面更加美观，也提升了用户体验。