html - 在容器中水平分佈五個圖像？

Question

我有div容器和五個圖像裏面。我需要在容器中分配它們（它具有動態寬度），以便圖像之間的間距相同，左側圖像向左對齊，右側圖像向右對齊。

UPD： 圖片必須有固定寬度（例如100px），但是容器div大於500px。

Answer 1

只需使用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所以他們不會溢出到下一行。

Answer 2

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