响应式小图像集合

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>