时间戳

首页 > 解决方案 > 如何在整个页面中均匀分布图像？

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

问题描述

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

我正在寻找一种解决方案，其中所有 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;
  }

感谢您的帮助！

标签： htmlcssflexbox

解决方案

继续使用 flex 的美感在 DOM 上显示元素。我将此链接添加到FLEX 功能，以便您了解更多关于这个伟大的 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>

推荐阅读