Phân phối ảnh đồng đều và ngang trong Div qua CSS

Question

Tôi đang gặp khó khăn trong việc tìm kiếm thông tin cụ thể cho trường hợp của mình. Tôi muốn phân phối 3 hình thu nhỏ hình ảnh trên một div 940px để xếp hàng với phần còn lại của nội dung của tôi. Cho đến nay, tôi đã nhận được những hình ảnh để xếp hàng theo chiều ngang, nhưng khoảng cách là tắt & mọi thứ được dịch chuyển sang trái.

Đây là CSS của tôi:

#thumbs { 
    width: 940px; 
    margin-top:90px; 
    margin-left: auto; 
    margin-right: auto; 
} 

HTML của tôi:

<div id="thumbs"> 
    <a id="single_image" href="/dev/images/1.png"> 
    <img src="/dev/images/thumb1.png" alt=""/> 
    </a> 
    <a id="single_image" href="/dev/images/2.png"> 
    <img src="/dev/images/thumb2.png" alt=""/> 
    </a> 
    <a id="single_image" href="/dev/images/3.png"> 
    <img src="/dev/images/thumb3.png" alt=""/> 
    </a> 
</div> 

Ví dụ hình ảnh

Những gì tôi hiện có:

Những gì tôi đang cố gắng để đạt được:

sự giúp đỡ của bạn được nhiều đánh giá cao.

Answer 1

Sử dụng kỹ thuật này thể hiện trong câu trả lời của tôi ở đây: Fluid width with equally spaced DIVs

Dưới đây là với mã của bạn: http://jsfiddle.net/thirtydot/JTcGZ/

CSS:

#thumbs { 
    width: 540px; 
    margin-top:90px; 
    margin-left: auto; 
    margin-right: auto; 

    text-align: justify; 
    -ms-text-justify: distribute-all-lines; 
    text-justify: distribute-all-lines; 
} 
#thumbs a { 
    vertical-align: top; 
    display: inline-block; 
    *display: inline; 
    zoom: 1; 
} 
.stretch { 
    width: 100%; 
    display: inline-block; 
    font-size: 0; 
    line-height: 0 
} 

HTML:

<div id="thumbs"> 
    <a id="single_image1" href="#"><img src="http://dummyimage.com/150x150/444/fff" alt=""/></a> 
    <a id="single_image2" href="#"><img src="http://dummyimage.com/150x150/444/fff" alt=""/></a> 
    <a id="single_image3" href="#"><img src="http://dummyimage.com/150x150/444/fff" alt=""/></a> 
    <span class="stretch"></span> 
</div>​ 

Answer 2

Thử thêm

vị trí: tương đối; text-align: center;

trong #thumbs và đặt chiều rộng và lề cho (hoặc img) trong #thumbs.

Something như thế này, thử nghiệm các giá trị khác nhau:

#thumbs a { 
    width: 25%; 
    margin: 0 4%; 
    text-align:center; 
} 

Answer 3

tại sao không phải là div ngón tay cái gói id được sử dụng như một container với một đệm đầu 90px, và các yếu tố nội bộ khác sử dụng một lớp đơn giản (không phải là một id để nó có thể được tái sử dụng), mà tất cả các phao còn lại. theo cách đó, chúng được sắp xếp theo chiều ngang một cách hoàn hảo, và thùng chứa bao bì cũng cung cấp phần lề mà bạn đang tìm kiếm. bạn cũng sẽ sử dụng mã ít hơn đáng kể để hoàn thành những gì bạn muốn.

Answer 4

Có một giải pháp làm sạch:

http://radiatingstar.com/distribute-divs-images-equaly-line

#container { 
    text-align: justify; 
} 
#container > div { 
    width: 100px; /* Declare your value. Can be in relative units. */ 
    display: inline-block; 
    vertical-align: top; 
} 
#container:after { 
    content: ""; 
    width: 100%; 
    display: inline-block; 
} 

Answer 5

Nhược điểm của text-align: justify; là này mà bạn phải có khoảng trống giữa mỗi hai yếu tố inline-block, nếu không những hai yếu tố sẽ gắn bó với nhau khác.

bạn có thể kiểm tra hành vi này ở đây: http://jsfiddle.net/JTcGZ/1552/

Cách mới hiện đại để đạt được điều này là sử dụng flex.

#thumbs { 
    display: flex; 
    justify-content: space-between // flex-start | flex-end | center | space-around; 
    align-items: stretch // flex-start | flex-end | center | baseline; 
} 
#thumbs a { 
    display: inline-block; 
} 

Ngoài ra bạn có thể xác định chiều rộng tỷ lệ phần trăm trong các trình duyệt hiện đại:

#thumbs a { 
    width: calc((100%/3) - 10px); 
} 

vui lòng truy cập trang này để xem chi tiết thêm về cách bố trí flex:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 6

Câu trả lời rất đơn giản , chỉ cần sử dụng:

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

Đó là tất cả!