在一个大块中显示图像缩略图的最佳方式是什么？答案

【问题标题】：What's the best way to display image thumbnails in one large block?在一个大块中显示图像缩略图的最佳方式是什么？
【发布时间】：2016-05-21 05:49:25
【问题描述】：

我想在一个块中显示我的图像，每行有五个缩略图。这样做的最佳方法是什么？

目前我已将容器 div 设置为 100% 宽度。解决方案是否类似于将另一个 div 放在 div 中，我会限制为某个宽度或其他东西？

/* Site Wide CSS */

body {
    max-width: 100%; 
    margin: 0;   
    font-size: 16px;   
    background-color: #fff;
    color: #000;
    font-family: 'Lato', sans-serif;  
}

a {
    text-decoration: none;   
    color: #555; 
}

p {
    text-align: center; 
}

/* Nav Bar Styles */

nav {
    text-align: right;
    width: 100%;
    background-color: #fff; 
    font-size: 1.4em;
    padding: 0;
    padding-top: .5%;
    padding-bottom: .6%;

}

ul {
    padding-right: 2%;  
}

.navigation {
    display: inline;
    margin: .5%;

}

.logo {
    color:#000; 
    display: inline;
    float: left;
    margin: 0 0 0 1%;
}

/* Footer */

footer {
    text-align: center;
    padding-top: 2%;
    padding-bottom: .5%;  
    font-size: 79%;
    color: #000;
    background-color: #fff; 
    clear: left;

}

/* Font Awesome */

i.fa {
    font-size: 2.3em;   
}

.container {
    padding-top: 2.5%; 
    padding-bottom: 2.5%;  
}


/* Styling for Photography and Design Pages */

.categories {
    font-size: 1.4em;   
    text-align: center;
    padding-top: 2%;
    padding-bottom: 1%;
}

.imageGrid {
    width: 100%;
    display: block; 
    text-align: center;

}

.images {
    width:9%;
    marign: 0;
    padding: 0;


}

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Brian Funderburke Photography &amp; Design</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/sitewide.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/photography.css">
<link href="css/lightbox.css" rel="stylesheet">
</head>
<body>
<header>
    <nav>
        <h1 class="logo">B.Fun Photography &amp; Design</h1>
            <ul>
                <li class="navigation"><a href="home.html">Home</a></li>
                <li class="navigation"><a href="photography.html">Photography</a></li>
                <li class="navigation"><a href="design.html">Design</a></li>
                <li class="navigation"><a href="about.html">About</a></li>
                <li class="navigation"><a href="contact.html">Contact</a></li>
            </ul>
    </nav>
</header>
<h2 class="categories">Landscapes</h2>
<div class="imageGrid">
    <a href="img/landscapes/br.jpg" data-lightbox="image-1" data-title="Blue Ridge Sunset"><img src="https://lh3.ggpht.com/vFpQP39LB60dli3n-rJnVvTM07dsvIzxrCL5xMiy1V4GV4unC1ifXkUExQ4N-DBCKwI=w300" alt="Blue Ridge Sunset" class="images"></a>
    <a href="https://lh3.ggpht.com/vFpQP39LB60dli3n-rJnVvTM07dsvIzxrCL5xMiy1V4GV4unC1ifXkUExQ4N-DBCKwI=w300y.jpg" data-lightbox="image-1" data-title="Duality"><img src="https://lh3.ggpht.com/vFpQP39LB60dli3n-rJnVvTM07dsvIzxrCL5xMiy1V4GV4unC1ifXkUExQ4N-DBCKwI=w300" alt="Duality" class="images"></a>
    <a href="https://lh3.ggpht.com/vFpQP39LB60dli3n-rJnVvTM07dsvIzxrCL5xMiy1V4GV4unC1ifXkUExQ4N-DBCKwI=w300" data-lightbox="image-1" data-title="Elakala Falls"><img src="https://lh3.ggpht.com/vFpQP39LB60dli3n-rJnVvTM07dsvIzxrCL5xMiy1V4GV4unC1ifXkUExQ4N-DBCKwI=w300" alt="Elakala Falls" class="images"></a>
    <a href="https://lh3.ggpht.com/vFpQP39LB60dli3n-rJnVvTM07dsvIzxrCL5xMiy1V4GV4unC1ifXkUExQ4N-DBCKwI=w300" data-lightbox="image-1" data-title="Methuselah"><img src="https://lh3.ggpht.com/vFpQP39LB60dli3n-rJnVvTM07dsvIzxrCL5xMiy1V4GV4unC1ifXkUExQ4N-DBCKwI=w300" alt="Methuselah" class="images"></a>
    <a href="https://lh3.ggpht.com/vFpQP39LB60dli3n-rJnVvTM07dsvIzxrCL5xMiy1V4GV4unC1ifXkUExQ4N-DBCKwI=w300" data-lightbox="image-1" data-title="Old City Cemetary"><img src="https://lh3.ggpht.com/vFpQP39LB60dli3n-rJnVvTM07dsvIzxrCL5xMiy1V4GV4unC1ifXkUExQ4N-DBCKwI=w300" alt="Old City Cemetary" class="images"></a>
    <a href="https://lh3.ggpht.com/vFpQP39LB60dli3n-rJnVvTM07dsvIzxrCL5xMiy1V4GV4unC1ifXkUExQ4N-DBCKwI=w300" data-lightbox="image-1" data-title="Mcafee's Knob"><img src="https://lh3.ggpht.com/vFpQP39LB60dli3n-rJnVvTM07dsvIzxrCL5xMiy1V4GV4unC1ifXkUExQ4N-DBCKwI=w300" alt="Mcafee's Knob" class="images"></a>
    <a href="https://lh3.ggpht.com/vFpQP39LB60dli3n-rJnVvTM07dsvIzxrCL5xMiy1V4GV4unC1ifXkUExQ4N-DBCKwI=w300" data-lightbox="image-1" data-title="Appalachian Farmland"><img src="https://lh3.ggpht.com/vFpQP39LB60dli3n-rJnVvTM07dsvIzxrCL5xMiy1V4GV4unC1ifXkUExQ4N-DBCKwI=w300" alt="Appalachian Farmland" class="images"></a>
    <a href="https://lh3.ggpht.com/vFpQP39LB60dli3n-rJnVvTM07dsvIzxrCL5xMiy1V4GV4unC1ifXkUExQ4N-DBCKwI=w300" data-lightbox="image-1" data-title="Blackwater Falls"><img src="https://lh3.ggpht.com/vFpQP39LB60dli3n-rJnVvTM07dsvIzxrCL5xMiy1V4GV4unC1ifXkUExQ4N-DBCKwI=w300" alt="Blackwater Falls" class="images"></a>
    <a href="https://lh3.ggpht.com/vFpQP39LB60dli3n-rJnVvTM07dsvIzxrCL5xMiy1V4GV4unC1ifXkUExQ4N-DBCKwI=w300" data-lightbox="image-1" data-title="Dark Hollows Falls"><img src="https://lh3.ggpht.com/vFpQP39LB60dli3n-rJnVvTM07dsvIzxrCL5xMiy1V4GV4unC1ifXkUExQ4N-DBCKwI=w300" alt="Dark Hollows Falls" class="images"></a>
    <a href="https://lh3.ggpht.com/vFpQP39LB60dli3n-rJnVvTM07dsvIzxrCL5xMiy1V4GV4unC1ifXkUExQ4N-DBCKwI=w300" data-lightbox="image-1" data-title="Elakala Falls"><img src="https://lh3.ggpht.com/vFpQP39LB60dli3n-rJnVvTM07dsvIzxrCL5xMiy1V4GV4unC1ifXkUExQ4N-DBCKwI=w300" alt="Elakala Falls" class="images"></a>
    <a href="https://lh3.ggpht.com/vFpQP39LB60dli3n-rJnVvTM07dsvIzxrCL5xMiy1V4GV4unC1ifXkUExQ4N-DBCKwI=w300" data-lightbox="image-1" data-title="Humpback Rocks"><img src="https://lh3.ggpht.com/vFpQP39LB60dli3n-rJnVvTM07dsvIzxrCL5xMiy1V4GV4unC1ifXkUExQ4N-DBCKwI=w300" alt="Humpback Rocks" class="images"></a>
    <a href="https://lh3.ggpht.com/vFpQP39LB60dli3n-rJnVvTM07dsvIzxrCL5xMiy1V4GV4unC1ifXkUExQ4N-DBCKwI=w300" data-lightbox="image-1" data-title="Lindy Point"><img src="https://lh3.ggpht.com/vFpQP39LB60dli3n-rJnVvTM07dsvIzxrCL5xMiy1V4GV4unC1ifXkUExQ4N-DBCKwI=w300" alt="Lindy Point" class="images"></a>
    <a href="https://lh3.ggpht.com/vFpQP39LB60dli3n-rJnVvTM07dsvIzxrCL5xMiy1V4GV4unC1ifXkUExQ4N-DBCKwI=w300" data-lightbox="image-1" data-title="Lindy Point Sunset"><img src="https://lh3.ggpht.com/vFpQP39LB60dli3n-rJnVvTM07dsvIzxrCL5xMiy1V4GV4unC1ifXkUExQ4N-DBCKwI=w300" alt="Lindy Point Sunset" class="images"></a>
    <a href="https://lh3.ggpht.com/vFpQP39LB60dli3n-rJnVvTM07dsvIzxrCL5xMiy1V4GV4unC1ifXkUExQ4N-DBCKwI=w300" data-lightbox="image-1" data-title="The Overlook"><img src="https://lh3.ggpht.com/vFpQP39LB60dli3n-rJnVvTM07dsvIzxrCL5xMiy1V4GV4unC1ifXkUExQ4N-DBCKwI=w300" alt="The Overlook" class="images"></a>
    <a href="https://lh3.ggpht.com/vFpQP39LB60dli3n-rJnVvTM07dsvIzxrCL5xMiy1V4GV4unC1ifXkUExQ4N-DBCKwI=w300" data-lightbox="image-1" data-title="Golyat"><img src="https://lh3.ggpht.com/vFpQP39LB60dli3n-rJnVvTM07dsvIzxrCL5xMiy1V4GV4unC1ifXkUExQ4N-DBCKwI=w300" alt="Golyat s" class="images"></a>
</div>
<footer>
    <p>&#169; 2016 Brian Funderburke. All Rights Reserved.</p>
</footer>
<script src="js/lightbox-plus-jquery.js">
    lightbox.option({
          'wrapAround': true,
          'alwaysShowNavOnTouchDevices': true,
          'showImageNumberLabel': true,
        })
</script>
</body>
</html>

我已经放置了一个占位符图片来帮助你们看看它目前的样子。我希望有五行的缩略图。我也一直难以摆脱缩略图之间的边距，所以帮助弄清楚这一点也将不胜感激。

【问题讨论】：

标签： html css

【解决方案1】：

https://jsfiddle.net/ashus6sy/

关键是包含元素上的font-size:0。空白在每个元素之间占用非零空间，因此即使使用width:20%，由于这些空白，您也不会得到正好 5 个对象。

.imageGrid{
  margin:0;
  padding:0;
  display:block;
  width:100%;
  font-size:0;
}

我还在所有内容上设置了padding:0 和margin:0。

a 有width:20% 而img 有width:100%，因为图像宽度的 100% 是相对于a 的20% 而言的

【讨论】：

@Alexei 所指的“空白”来自 HTML 中的位置、空格或返回，以及小写 g等字母的下降高度> 或 j。所有内联元素都将被视为 like 文本字符，这意味着它们将为任何空白字符（如空格）提供空间，或者与空格一起返回以用于下降。
@Alexei Darmin 感谢您的帮助！像魅力一样工作。 > 在css中究竟做了什么？我还是有点新，以前从未使用过它们。
没问题！ CSS 领域中的> 是指父代的直系后代。没有它们，css 将适用于任何孩子，无论他们有多深。我建议阅读：css-tricks.com/child-and-sibling-selectors