如何在整个页面中均匀分布图像？

Question

我正在尝试编写一个网站，在该网站的页面底部显示三个图像。 我已将其编码到图像显示的位置并显示在彼此旁边，但不要占据整个页面，并且图片之间的间距相等。

我正在寻找一种解决方案，其中所有 3 张图像水平显示，图像之间的间距相等，并且它们水平填充页面。

HTML

        <section>
            <ul class="film_strip">
                <li><img src="Img\art.jpg" width="400" height="400" alt="classical"/></li>
                <li><img src="Img\artalt.jpg" width="400" height="400" alt="dance" /></li>
                <li><img src="Img\artaalt.jpg" width="400" height="400" alt="painting" /></li>
            </ul>
        </section>

CSS

.film_strip li {
    float: left;
    list-style-type: none;
  }

.film_strip li img {
    float: left;
    background: #DEE0E3;
    padding: 5px;
    margin: 5px;
    border: 1px solid #AAA;
    color: #3C3C3D;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 16px;
  }

感谢您的帮助！

Answer 1

您可以为此使用flex。

ul {
  list-style: none;
  display: flex;
  justify-content: space-around;
  margin: 0;
  padding: 0;
}

li {
  margin: 1rem;
}

img {
  max-width: 100%;
}

<ul>
  <li><img src="https://dummyimage.com/600x400/000/fff" /></li>
  <li><img src="https://dummyimage.com/600x400/000/fff" /></li>
  <li><img src="https://dummyimage.com/600x400/000/fff" /></li>
</ul>

Answer 2

如果您想让图像将width 和height 设置为400px，您可以使用display: flex 并将其设置为height: 400px。那么flex项目的宽度应该设置为400px。

一个例子：

.film_strip {
  display: flex;
  align-items: stretch; /* Default */
  justify-content: space-around;
  height: 400px;
  width: 100%;
  background: #cacaca;
  margin: 0;
  padding: 0;
}

.film_strip li {
  display: block;
  flex: 0 1 400px;
}

.film_strip li img {
  background: #DEE0E3;
  height: 100%;
  width: 100%;
  padding: 5px;
  border: 1px solid #AAA;
  color: #3C3C3D;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 16px;
}

<section>
    <ul class="film_strip">
      <li><img src="http://blog.w3c.br/wp-content/uploads/2013/03/css31-213x300.png" alt="classical" /></li>
      <li><img src="http://blog.w3c.br/wp-content/uploads/2013/03/css31-213x300.png" alt="dance" /></li>
      <li><img src="http://blog.w3c.br/wp-content/uploads/2013/03/css31-213x300.png" alt="painting" /></li>
    </ul>
  </section>

Answer 3

继续使用 flex 的美感在 DOM 上显示元素。我将此链接添加到 FLEX capabilities，以便您了解更多关于这个伟大的 CSS 盟友的信息。

对于 IMG 标签，您并不需要颜色、文本装饰、文本转换和字体大小规则，因为该标签上不包含任何文本，但这是最好的建议编码方面的实践。

为了避免在您写入 HTML 的每个 IMG 标记中使用常规的宽度和高度属性，我将它们添加到 CSS 中，这样如果您需要在 40 个 IMG 标记中更改此值，您只需在CSS 而不是单独处理它们，对吗？

您需要再次将 src 更改为您的图像，我只是想让它向您展示这是如何工作的。我当然希望这会有所帮助，伙计！

.film_strip {
    display: flex;
    justify-content: space-evenly;
}

.film_strip li {
    float: left;
    list-style-type: none;
}

.film_strip li img {
    float: left;
    width: 400px;
    height: 400px;
    background: #DEE0E3;
    padding: 5px;
    margin: 5px;
    border: 1px solid #AAA;
}

<section>
   <ul class="film_strip">
      <li>
         <img src="https://pbs.twimg.com/profile_images/1161044216648257536/qVgKscPf_400x400.jpg" alt="superGirl"/>
      </li>
      <li><img src="https://pbs.twimg.com/profile_images/1334420253800091650/CV_UKMMO_400x400.jpg" alt="wonderwoman" /></li>
      <li><img src="https://i.pinimg.com/474x/ab/97/11/ab9711fd3ba98d13574128f4bffe8366.jpg" alt="catwoman" /></li>
   </ul>
</section>

Answer 4

正如其他人所说，flex 是一个好方法。使用 film_strip 组件中的 justify-content 属性（可满足您需求的可用选项有 justify-content: space-evenly、justify-content: space-between 和 justify-content: space-around）。

    .film_strip {
        display: flex;
        justify-content: space-evenly;

        width: 100%;
        margin: 0;
        padding-left: 0;

        list-style: none;
    }

    .film_strip li {
        display: flex;

        border: 1px solid #AAA;
    }

    .film_strip li img {
        background: #DEE0E3;
        color: #3C3C3D;

        font-size: 16px;
        text-decoration: none;
        text-transform: uppercase;
    }