Lưới hình thu nhỏ linh hoạt với css

Tôi đang cố định vị trí hình thu nhỏ trên màn hình thậm chí là "đệm". Dưới đây là một hình ảnh minh họa cho các vấn đề:Lưới hình thu nhỏ linh hoạt với css

page preview

<!DOCTYPE html> 
<html> 
<head> 
<title>Test rows</title> 

<style type="text/css"> 

    body { 
     background: #121212; 
     color: #fff; 
    } 

    #Container { 
     background: #585858; 
     margin: 0 auto; 
     min-width: 1024px; 
     width: 85%; 
     margin-top: 50px; 

     text-align: justify; 
     -ms-text-justify: distribute-all-lines; 
     text-justify: distribute-all-lines; 
    } 

    #Container a { 
     vertical-align: top; 
     display: inline-block; 
     *display: inline; 
     zoom: 1; 
    } 

    .stretch { 
     width: 100%; 
     display: inline-block; 
     font-size: 0; 
     line-height: 0; 
    } 




</style> 
</head> 

<body> 

<div id="Container"> 

<a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a> 
<a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a> 
<a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a> 
<a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a> 
<a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a> 
<a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a> 
<a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a> 
<a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a> 
<a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a> 
<a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a> 
<a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a> 
<a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a> 
<span class="stretch"></span> 

</div> 




</body> 
</html>

tôi đã làm một số nghiên cứu ở đây trong stackoverflow và tìm thấy một số mã hữu ích để bắt đầu, nhưng tôi phải đối mặt với một vài vấn đề. Tôi muốn các hình ảnh để căn chỉnh từ trái sang phải và không "snap" vào thân của container khi tôi có ít hình ảnh trong các hàng cuối cùng khi bạn nhìn thấy hình ảnh.

Ngoài ra tôi muốn có "không gian thẳng đứng" giữa các hàng là tương đương với khoảng cách ngang giữa các hình ảnh, bây giờ tôi có một số khoảng cách thẳng đứng như "3px" và tôi không chắc chắn nơi được đến từ đâu. Tôi mở cửa cho các giải pháp js nếu cần thiết. Cảm ơn bạn

Nguồn

2013-12-16 user1765661

Chỉ cần bỏ qua 'text-biện minh: phân phối-all-dòng; '? Hành vi mặc định của 'text-align: justify;' là trái căn chỉnh dòng cuối cùng iirc – xec

nhưng điều đó sẽ không phân phối hình ảnh đồng đều trong không gian nằm ngang như tôi có trong hàng đầu tiên. – user1765661

Would một cái gì đó LIKE THIS công việc cho bạn?

Điều này được dựa trên câu trả lời được cung cấp here on SO mà tôi khuyên bạn nên đọc, cũng như this one - cũng dựa trên nó. Điều này biện minh cho các phần tử con.

HTML

<div id="container"> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <span class="stretch"></span> 
</div>

CSS

#container { 

    text-align: justify; 
    -ms-text-justify: distribute-all-lines; 
    text-justify: distribute-all-lines; 

    /* just for demo */ 

} 

.box { 
    width: 150px; 
    height: 125px; 
    background:#ccc; 
    vertical-align: top; 
    display: inline-block; 
    *display: inline; 
    margin:10px; 
    zoom: 1 
} 
.stretch { 
    width: 100%; 
    display: inline-block; 
    font-size: 0; 
    line-height: 0 
}

Ngoài ra, nếu thay cho các con là lý bạn muốn họ để gắn kết trái sang phải, có một cái nhìn tại this fiddle , dựa trên this answer on SO

HTML

<div class="container"> 
    <div>Box1</div> 
    <div>Box2</div> 
    <div>Box3</div> 
    <div>Box4</div> 
    <div>Box5</div> 
    <div>Box6</div> 
    <div>Box7</div> 
    <div>Box8</div> 
    <div>Box9</div> 
    <div>Box10</div> 
    <div>Box11</div> 
</div>

CSS

* { 
    margin: 0; 
    padding: 0; 
} 
.container { 
    overflow: auto; 
    display: block; 
} 
.container > div { 
    margin: 20px; 
    width: 150px; 
    height: 100px; 
    background: blue; 
    float: left; 
    color: #fff; 
    text-align: center; 
}

Nguồn

2013-12-16 10:03:32 SW4

Xin chào, mã đó có cùng vấn đề với việc chụp các hộp và không căn chỉnh chúng từ trái sang phải ở hàng cuối cùng. Cảm ơn anyway – user1765661

@ user1765661, Xem tại đây: http://jsfiddle.net/danield770/Vfffg/16/ – SW4

Tôi cũng cập nhật câu trả lời để bao gồm căn chỉnh từ trái sang phải như một giải pháp thay thế cho biện minh – SW4

-1

Bạn không cần sự cai trị text-align: justify; CSS http://jsfiddle.net/2ngCS/

Nguồn

2013-12-16 09:58:06

Tôi tin OP muốn các hộp được phân phối đồng đều, xem dòng đầu tiên của câu hỏi. – xec

chính xác, tôi muốn phân phối đồng đều hình ảnh. – user1765661

Lưới hình thu nhỏ linh hoạt với css

Trả lời

Các vấn đề liên quan