在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像素宽的图像行）：

这是将图像行拉伸到900px宽时的相同框：

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

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

Answer 1

对于较旧的浏览器，您可以使用text-align:justify和一个伪display:flex对于最新的浏览器，可以使用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> 

Answer 2

尝试这个：

html

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

的CSS

.table{
   display: table;
   width: 100%;
}
.image_row {
   diplay:table-row;

}
.image_row div {
   display: table-cell;
   text-align: center; /* if you want to be centered */
}
.image_row div img { 
   display:block; 
   max-width: 100%;  
}

Answer 3

您可以使用弹性显示，并将对齐内容设置为间隔。 您可以在图像行类中执行此操作：

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

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