html - 将同一行中的 3 个图像以相等的间距对齐？

Question

我想在 div 的同一行中对齐 3 个图像，第一个图像应对齐到页面左侧，第三个图像应对齐到页面右侧，第二个图像应完全居中对齐第一和第三张图片

尝试了下面的代码，但它以我想要的方式显示，如何将 3 张图片与正好位于其他 2 张图片中心的第二张图片对齐？

 <div>
 <img src="@Url.Content("~/images/image1.bmp")" alt="" align="left" />
 <div id="content" align="center"> 
 <img src="@Url.Content("~/images/image2.bmp")" alt="" align="center" />
 </div>
 <img src="@Url.Content("~/images/image3.bmp")" alt="" align="right"/>
 </div>


 <style type="text/css">
 #content {


 width:50%;
 margin-left: auto ;
 margin-right:auto ;


 }

Answer 1

现代方法:flexbox

只需将以下 CSS 添加到容器元素(此处为 div):

div {
  display: flex;
  justify-content: space-between;
}

div {
  display: flex;
  justify-content: space-between;
}

<div>
 <img src="http://placehold.it/100x100" alt=""  /> 
 <img src="http://placehold.it/100x100" alt=""  />
 <img src="http://placehold.it/100x100" alt="" />
</div>

旧方法(对于古老的浏览器——在 flexbox 之前)

在容器元素上使用 text-align: justify;。

然后拉伸(stretch)内容占100%宽度

标记

<div>
 <img src="http://placehold.it/100x100" alt=""  /> 
 <img src="http://placehold.it/100x100" alt=""  />
 <img src="http://placehold.it/100x100" alt="" />
</div>

CSS

div {
    text-align: justify;
}

div img {
    display: inline-block;
    width: 100px;
    height: 100px;
}

div:after {
    content: '';
    display: inline-block;
    width: 100%;
}

div {
    text-align: justify;
}

div img {
    display: inline-block;
    width: 100px;
    height: 100px;
}

div:after {
    content: '';
    display: inline-block;
    width: 100%;
}

<div>
 <img src="http://placehold.it/100x100" alt=""  /> 
 <img src="http://placehold.it/100x100" alt=""  />
 <img src="http://placehold.it/100x100" alt="" />
</div>