響應式小圖像集合

Question

通常爲了收集數據我會使用表格，但它似乎有很多問題。我的目標是收集圖像5寬10高。約150x150的圖像。但是，當我調整瀏覽器的大小時，圖像將放置在滾動框中。有沒有更容易的方法來組合這些圖像，除了表格？我是否應該使用媒體查詢將其大小調整爲特定屏幕尺寸的兩個寬度？

Answer 1

SOLUTION 1

。這是一個基本的畫廊一個簡單的代碼。它是敏感的，如果你的圖像的寬度和高度被定義並且完全相同，那麼這個代碼就可以做到。

.gallery { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style-type: none; 
 
    text-align: center; 
 
    /* to align your elements in the middle of the page */ 
 
} 
 
.gallery:after { 
 
    /* To clear floated elements after your gallery */ 
 
    content: "."; 
 
    visibility: hidden; 
 
    display: block; 
 
    height: 0; 
 
    clear: both; 
 
} 
 
.gallery li { 
 
    display: inline-block; 
 
    margin: 0 3px 15px; 
 
} 
 
figure { 
 
    margin: 0; 
 
    padding: 0; 
 
}

<ul class="gallery"> 
 
    <li> 
 
    <figure> 
 
     <img src="http://placehold.it/150x150"> 
 
     <figcaption>Some text</figcaption> 
 
    </figure> 
 
    </li> 
 
    <li> 
 
    <figure> 
 
     <img src="http://placehold.it/150x150"> 
 
     <figcaption>Some text</figcaption> 
 
    </figure> 
 
    </li> 
 
    <li> 
 
    <figure> 
 
     <img src="http://placehold.it/150x150"> 
 
     <figcaption>Some text</figcaption> 
 
    </figure> 
 
    </li> 
 
    <li> 
 
    <figure> 
 
     <img src="http://placehold.it/150x150"> 
 
     <figcaption>Some text</figcaption> 
 
    </figure> 
 
    </li> 
 
    <li> 
 
    <figure> 
 
     <img src="http://placehold.it/150x150"> 
 
     <figcaption>Some text</figcaption> 
 
    </figure> 
 
    </li> 
 
    <li> 
 
    <figure> 
 
     <img src="http://placehold.it/150x150"> 
 
     <figcaption>Some text</figcaption> 
 
    </figure> 
 
    </li> 
 
    <li> 
 
    <figure> 
 
     <img src="http://placehold.it/150x150"> 
 
     <figcaption>Some text</figcaption> 
 
    </figure> 
 
    </li> 
 
    <li> 
 
    <figure> 
 
     <img src="http://placehold.it/150x150"> 
 
     <figcaption>Some text</figcaption> 
 
    </figure> 
 
    </li> 
 
    <li> 
 
    <figure> 
 
     <img src="http://placehold.it/150x150"> 
 
     <figcaption>Some text</figcaption> 
 
    </figure> 
 
    </li> 
 
    <li> 
 
    <figure> 
 
     <img src="http://placehold.it/150x150"> 
 
     <figcaption>Some text</figcaption> 
 
    </figure> 
 
    </li> 
 
</ul>

SOLUTION 2

這是一個充分響應的解決方案。在第一種解決方案中，您的li尺寸始終相同，當尺寸太大時，它只會往下一行。在第二種解決方案中，寬度將根據屏幕大小進行調整，以便每行強制2,3,4或5個li。研究此代碼並根據您的需求進行調整。爲了更好地理解這個的jsfiddle調整您的瀏覽器窗口：http://jsfiddle.net/g7xokjk0/1/

.gallery { 
 
    margin: 0 auto; 
 
    padding: 0; 
 
    list-style-type: none; 
 
    overflow: hidden; 
 
} 
 
.gallery:after { 
 
    content: "."; 
 
    visibility: hidden; 
 
    display: block; 
 
    height: 0; 
 
    clear: both; 
 
} 
 
.gallery li { 
 
    float: left; 
 
    width: 48%; 
 
    margin: 0 1% 20px .5%; 
 
} 
 
.gallery img { 
 
    max-width: 100%; 
 
    height: auto; 
 
} 
 
figure { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
@media only screen and (min-width: 30em) { 
 
    .gallery li { 
 
    width: 30%; 
 
    } 
 
} 
 
@media only screen and (min-width: 40em) { 
 
    .gallery li { 
 
    width: 22%; 
 
    } 
 
} 
 
@media only screen and (min-width: 50em) { 
 
    .gallery li { 
 
    width: 17%; 
 
    } 
 
}

<ul class="gallery"> 
 
    <li> 
 
    <figure> 
 
     <img src="http://placehold.it/500x500"> 
 
     <figcaption>Some text</figcaption> 
 
    </figure> 
 
    </li> 
 
    <li> 
 
    <figure> 
 
     <img src="http://placehold.it/500x500"> 
 
     <figcaption>Some text</figcaption> 
 
    </figure> 
 
    </li> 
 
    <li> 
 
    <figure> 
 
     <img src="http://placehold.it/500x500"> 
 
     <figcaption>Some text</figcaption> 
 
    </figure> 
 
    </li> 
 
    <li> 
 
    <figure> 
 
     <img src="http://placehold.it/500x500"> 
 
     <figcaption>Some text</figcaption> 
 
    </figure> 
 
    </li> 
 
    <li> 
 
    <figure> 
 
     <img src="http://placehold.it/500x500"> 
 
     <figcaption>Some text</figcaption> 
 
    </figure> 
 
    </li> 
 
    <li> 
 
    <figure> 
 
     <img src="http://placehold.it/500x500"> 
 
     <figcaption>Some text</figcaption> 
 
    </figure> 
 
    </li> 
 
    <li> 
 
    <figure> 
 
     <img src="http://placehold.it/500x500"> 
 
     <figcaption>Some text</figcaption> 
 
    </figure> 
 
    </li> 
 
    <li> 
 
    <figure> 
 
     <img src="http://placehold.it/500x500"> 
 
     <figcaption>Some text</figcaption> 
 
    </figure> 
 
    </li> 
 
    <li> 
 
    <figure> 
 
     <img src="http://placehold.it/500x500"> 
 
     <figcaption>Some text</figcaption> 
 
    </figure> 
 
    </li> 
 
</ul>