Question

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

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

Answer 1

将所有图片保留在div中，然后将width: 20%;，min-width:100px;，text-align: center和float:left / display: inline-block提供给div {1}}元素。这应该可以解决问题。

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 ）

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中，这样它们就不会溢出到下一行。

HTML - 在容器上水平分布五个图像？

2 个答案: