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

标签 html css

我想在一个 block 中显示我的图像，每行五个缩略图。执行此操作的最佳方法是什么？

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

我放了一张占位符图片来帮助你们看看它目前的样子。我希望将缩略图排成五行。我也一直难以摆脱缩略图之间的边距，所以帮助解决这个问题也将不胜感激。

最佳答案

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%

关于html - 在一个大块中显示图像缩略图的最佳方式是什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35322619/

上一篇：javascript - 如何使单个标签不可点击？

下一篇：javascript - 控制台中的混合内容与 PrestaShop 网站

相关文章：

css - 使用无限循环链接 CSS 动画

css - 一起创建一个固定宽度的元素和一个响应式元素

css - 当应用于表格单元格时，如何使内联 block 呈现一致？

html - CSS 水平页面压缩

javascript - 如何在js/jquery中获取html标签的内部html？

javascript - 如何使用jquery过滤

css - 与基本CSS的 Angular 冲突

Javascript - CSS 幻灯片不显示默认图像

javascript - 我如何使用 css 和 javascript 更改两个选定元素的颜色

javascript - Bootstrap ，容器元素的预高度

©2024 IT工具网  联系我们