html - 在容器中水平分布五个图像？

Question

我有一个 div 容器和里面的五个图像。我需要将它们分布在容器内(它具有动态宽度)，以便图像之间的间距相同，并且左图像向左对齐，右图像向右对齐。

更新:图像必须具有固定宽度(例如 100px)，但容器 div 大于 500px。

Answer 1

把所有的图片都放在div里然后给width: 20%;, min-width:100px;,text-align: center 和 float:left/display: inline-block 到那些 div 元素。这应该可以解决问题。

div container
   --> div (5)
     --> images (5)

对于第一个子元素，使用 :first-child 伪类，对于最后一个子元素，使用 :last-child 伪类，然后给出 text -align :left 和 text-aling: right 分别。

HTML

<div>
    <div><img src="https://www.google.com.au/images/srpr/logo4w.png" /></div>
    <div><img src="https://www.google.com.au/images/srpr/logo4w.png" /></div>
    <div><img src="https://www.google.com.au/images/srpr/logo4w.png" /></div>
    <div><img src="https://www.google.com.au/images/srpr/logo4w.png" /></div>
    <div><img src="https://www.google.com.au/images/srpr/logo4w.png" /></div>
</div>

CSS

div>div {
    width:20%;
    float:left; /* display: inline-block; */
    min-width:100px; /* equal to the width of the image */
    text-align:center;
}

img{width:100px;}

div:first-child{text-align:left;}
div:last-child{text-align:right;}

Working Fiddle

Updated Fiddle (使用 javascript)