基本 HTML：将图像放在一行中，彼此之间的距离相同答案

【问题标题】：Basic HTML: place images in one row with same distance from each other基本 HTML：将图像放在一行中，彼此之间的距离相同
【发布时间】：2012-10-28 17:04:01
【问题描述】：

我的目标是将 3 张图像以相同的距离放置在一行中，如下图所示（假设 2 个箭头的长度相同）。

到目前为止，我的解决方案是一个非常丑陋的解决方案，如果窗口太小，它就会中断：

<h1>
    <div style="width:105px; height:30px; float:left; margin-top:25px;">
        <img src="image1.png"/>
    </div>
    <div style="width:190px; height:30px; float:left; margin-top:25px; margin-left:30%; margin-right:30%;">
        <img src="image2.png"/>
    </div>
    <div style="width:102px; height:30px; float:right; margin-top:25px;">
        <img src="image3.png"/>
    </div>
    <div style="clear: both;">
    </div>
</h1>

我真的更喜欢“干净”的解决方案，但是到目前为止我关于定位的 HTML 知识太有限了。任何帮助将不胜感激。

【问题讨论】：

你可以尝试让 div 居中，margin:0 auto;
你的H1的宽度是固定的吗？
@Šime Vidas H1 的宽度不是直接固定的，但我认为我从某些父元素继承了一些固定的宽度。
@KB 但是如果窗口太小，您会说“它会中断”。如果 H1 是固定的，它将始终具有相同的宽度，并且不会中断。
@KB 无论如何，您可以通过简单地明确指定 H1 上的宽度来防止中断。因此，您确定它不中断所需的宽度，并在 H1 上设置该宽度。

标签： css html positioning

【解决方案1】：

Use text-align: justify:

<div class="outer">
  <img src="http://placehold.it/50x100" />
  <img src="http://placehold.it/150x100" />
  <img src="http://placehold.it/50x100" />
  <span class="fix"></span>
</div>

.outer {
    text-align: justify;
}
.outer img {
    display: inline-block;
    vertical-align: center;
}
.outer .fix {
    width: 100%;
    height: 0;
    display: inline-block;
}

在大多数浏览器中，you can remove that .fix span, and add:

.outer::after {
    width: 100%;
    height: 0;
    display: inline-block;
    content: "";
}

【讨论】：