在css中均匀地分布宽度不均匀的项目在父元素的整个宽度上

Question

我很难弄清楚如何干净利落地完成我在标题中所要求的内容。

比如说我有这样的事情：

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

我已经看到了类似问题的答案，但他们没有处理在响应式父元素中传播混合宽度元素的问题。

在像Photoshop这样的东西中，这被称为＆＃34;分配水平中心＆＃34;。这是我在photoshop中制作的一个例子（500px宽图像行）：

当图像行被拉伸到900px宽时，这里是相同的框：

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

如何在css中完成这个基本想法？

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

试试这个：

HTML

A xor B

CSS

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

Answer 3

您可以使用flex显示并将justify-content设置为space-between。您可以在图像行类上执行此操作：

.image-row {
    display: flex;
    justify-content: space-between;
}

重点是在容器div上使用此类。