html - 在 css 中将宽度不均匀的元素均匀分布在父元素的整个宽度上

Question

我很难弄清楚如何准确地完成我在标题中的要求。

比如说我有这样的东西:

<div class="image-row">
    <img src="image1">
    <img src="image2">
    <img src="image3">
    <img src="image4">
    <img src="image5">
</div>

我看过类似问题的答案，但它们没有处理跨响应式父元素传播混合宽度元素的问题。

在 Photoshop 之类的软件中，这称为“分布水平中心”。这是我在 photoshop 中制作的示例(500 像素宽的图像行):

当图像行被拉伸(stretch)到 900 像素宽时，这里是相同的框:

请注意，图像之间的间隙甚至不是必需的，传播甚至基于对象的水平中心。

如何在 css 中实现这个基本思想？

Answer 1

您可以使用 text-align:justify 和针对旧版浏览器的伪代码，或者针对最新的浏览器使用 display:flex 属性。

.image-row {
  width: 500px;
  border: solid;
  margin: 1em auto;
}
img {
  vertical-align: top;
}
.justify {
  font-size: 0.01px;
  text-align: justify;
}
.justify:after {
  content: '';
  display: inline-block;
  width: 99%;
  vertical-align: top;
  height: 0;
}
.space-between {
  display: flex;
  justify-content: space-between
}

<div class="image-row justify">
  <img src="http://lorempixel.com/120/50">
  <img src="http://lorempixel.com/50/50">
  <img src="http://lorempixel.com/80/50">
  <img src="http://lorempixel.com/70/50">
  <img src="http://lorempixel.com/30/50">
</div>
<div class="image-row space-between">
  <img src="http://lorempixel.com/75/50">
  <img src="http://lorempixel.com/30/50">
  <img src="http://lorempixel.com/100/50">
  <img src="http://lorempixel.com/50/50">
  <img src="http://lorempixel.com/80/50">
</div>