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

我试图编码一个网站，我在页面底部显示三个图像。 我已经将其编码到图像显示的位置，并显示在彼此相邻的位置，但不会占用整个页面，图片之间的间距相等

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

HTML

---

我感谢你的帮助

您可以使用

flex

进行此操作

ul{
列表样式：无；
显示器：flex；
证明内容：周围的空间；
保证金：0；
填充：0；
}
李{
保证金：1rem；
}
img{
最大宽度：100%；
}

如果要将图像的

宽度和
高度设置为
400px
，可以使用
显示：flex
并设置其
高度：400px
。然后
flex
项的宽度应设置为
400px

例如：


.film\u strip{
显示器：flex；
对齐项目：拉伸；/*默认值*/
证明内容：周围的空间；
高度：400px；
宽度：100%；
背景：卡卡卡；
保证金：0；
填充：0；
}
.李先生{
显示：块；
flex:011400px；
}
.film_strip li img{
背景：#DEE0E3；
身高：100%；
宽度：100%；
填充物：5px；
边框：1px实心#AAA；
颜色：#3c3d；
文字装饰：无；
文本转换：大写；
字体大小：16px；
}






继续使用flex的优点在DOM上显示元素。我将此链接添加到，以便您进一步了解这个伟大的CSS盟友

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

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

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


.film\u strip{
显示器：flex；
对正内容：空间均匀；
}
.李先生{
浮动：左；
列表样式类型：无；
}
.film_strip li img{
浮动：左；
宽度：400px；
高度：400px；
背景：#DEE0E3；
填充物：5px；
保证金：5px；
边框：1px实心#AAA；
}







正如其他人所说，flex是一种很好的方法。在film_strip组件中使用justify content属性（适合您需要的可用选项有<代码>justify content:space equality
，<代码>justify content:space between

和<代码>justify content:space around）

---

display:flex

用于

ul

和

flex:1

用于

li

不理解此问题的投票。从网页设计开始，这些问题就在网上被描述。更重要的是，有很多代码示例和现成的库，比如Twitter引导，为什么不使用它们呢？简单的一件事，你应该尝试自己的百分比宽度+一些边边距，在10秒钟内完成。

        <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>

.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;
  }

    .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;
    }