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

Question

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

UPD： 图像必须具有固定宽度（例如 100 像素），但容器 div 大于 500 像素。

Answer 1

将所有图像保留在's 中，div然后将width: 20%;、和/赋予这些元素。这应该可以解决问题。min-width:100px;text-align: centerfloat:leftdisplay: inline-blockdiv

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

工作小提琴

更新小提琴（使用 javascript）

Answer 2

只需使用width:20%;和float;left;。

jsFiddle

img {
    width:20%;
    float:left;

    box-sizing:border-box;
    border:1px solid #000;
}

您现在可以添加box-sizing:border-box，您的padding和border尺寸将包含在您的中width，因此它们不会溢出到下一行。