Question

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

目前我的容器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>

我已经添加了一个占位符图片，以帮助您了解目前的情况。我要将缩略图分成五行。我也很难摆脱缩略图之间的边缘，所以帮助确定它也会受到赞赏。

Answer 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％的图片相对于20% a }}

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

1 个答案: