如何在图库中的缩略图之间留出空间并且在所有浏览器中都相同？
Posted
技术标签:
【中文标题】如何在图库中的缩略图之间留出空间并且在所有浏览器中都相同？【英文标题】：How do I make space between the thumbnails in the gallery and it's the same in all browsers? 【发布时间】：2021-02-21 09:31:03 【问题描述】：我有一个带有缩略图的滑动画廊。我尝试使缩略图之间的距离相等（大约 1-2 像素），并且这个距离在每个浏览器中都相同。 我尝试了不同的代码，但没有奏效。 我尝试了边距、填充、引导表列、不同大小的不同类，但我没有得到相等的距离，或者我做错了什么。 如何在图库中的缩略图之间留出相等的空间，并且在所有浏览器中都一样？
/*
* Core Owl Carousel CSS File
* v1.3.3
*/
/* clearfix */
.owl-carousel .owl-wrapper:after
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
/* display none until init */
.owl-carousel
position: relative;
width: 100%;
-ms-touch-action: pan-y;
.owl-carousel .owl-wrapper
display: none;
position: relative;
-webkit-transform: translate3d(0px, 0px, 0px);
.owl-carousel .owl-wrapper-outer
overflow: hidden;
position: relative;
width: 100%;
.owl-carousel .owl-wrapper-outer.autoHeight
-webkit-transition: height 500ms ease-in-out;
-moz-transition: height 500ms ease-in-out;
-ms-transition: height 500ms ease-in-out;
-o-transition: height 500ms ease-in-out;
transition: height 500ms ease-in-out;
.owl-carousel .owl-item
float: left;
justify-content:center;
margin:1.875em;
display:flex;
.owl-controls .owl-page,
.owl-controls .owl-buttons div
cursor: pointer;
.owl-controls
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
/* mouse grab icon */
.grabbing
cursor:url(grabbing.png) 8 8, move;
/* fix */
.owl-carousel .owl-wrapper,
.owl-carousel .owl-item
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link href="https://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700,800,900&display=swap" rel="stylesheet">
<title></title>
</head>
<body>
<!-- ***** Header Area Start ***** -->
<header class="header-area header-sticky">
</header>
<!-- ***** Content Gallery ********************************************************************************** -->
<section id="screenshot">
<!-- Screenshot Owl Carousel -->
<div class="owl-carousel">
<div class="item col-md-3 col-sm-3 wow fadeInUp" data-wow-delay="0.9s" >
<a href="https://lh3.googleusercontent.com/proxy/LMDoTaFIRsc6thppojY-XYmAl3oCP10c5kE3QdeUr4Gk4L8OqEEAxfw4ECEfswW6EdJ48YomaXj7BAjzyNjL" class="image-popup">
<img src="https://lh3.googleusercontent.com/proxy/LMDoTaFIRsc6thppojY-XYmAl3oCP10c5kE3QdeUr4Gk4L8OqEEAxfw4ECEfswW6EdJ48YomaXj7BAjzyNjL" class="img-responsive div2" >
</a>
</div>
<p></p>
<div class="item col-md-3 col-sm-3 wow fadeInUp" data-wow-delay="0.9s">
<a href="images/2.jpg" class="image-popup">
<img src="https://i.pinimg.com/originals/63/5b/85/635b85d1013a50df7aae1b8e21d1a445.jpg" class="img-responsive div1" >
</a>
</div>
<div class="item col-md-3 col-sm-3 wow fadeInUp" data-wow-delay="0.9s">
<a href="images/3.jpg" class="image-popup">
<img src="https://i.pinimg.com/originals/63/5b/85/635b85d1013a50df7aae1b8e21d1a445.jpg" class="img-responsive div1" >
</a>
</div>
<div class="item col-md-3 col-sm-3 wow fadeInUp" data-wow-delay="0.9s">
<a href="images/4.jpg" class="image-popup">
<img src="https://lh3.googleusercontent.com/proxy/LMDoTaFIRsc6thppojY-XYmAl3oCP10c5kE3QdeUr4Gk4L8OqEEAxfw4ECEfswW6EdJ48YomaXj7BAjzyNjL" class="img-responsive div2" >
</a>
</div>
<p></p>
<div class="item col-md-3 col-sm-3 wow fadeInUp" data-wow-delay="0.9s">
<a href="images/5.jpg" class="image-popup">
<img src="https://lh3.googleusercontent.com/proxy/LMDoTaFIRsc6thppojY-XYmAl3oCP10c5kE3QdeUr4Gk4L8OqEEAxfw4ECEfswW6EdJ48YomaXj7BAjzyNjL" class="img-responsive div2" >
</a>
</div>
<p></p>
<div class="item col-md-3 col-sm-3 wow fadeInUp" data-wow-delay="0.9s">
<a href="images/6.jpg" class="image-popup">
<img src="https://lh3.googleusercontent.com/proxy/LMDoTaFIRsc6thppojY-XYmAl3oCP10c5kE3QdeUr4Gk4L8OqEEAxfw4ECEfswW6EdJ48YomaXj7BAjzyNjL" class="img-responsive div2" >
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer id="footer">
</footer>
</body>
</html>【问题讨论】：
您的图片不公开，因此视觉输出已损坏。 我必须做什么 请不要尝试通过不发布代码来破解 SO 我制作了一个 sn-p - 请修复它，使其成为带有相关库的 minimal reproducible example 【参考方案1】：你可以使用底部边距或左边距你想要距离的一侧。如果它有效，请告诉我
margin-bottom:2px;
margin-left:2px;
这样的属性
【讨论】：
不幸的是距离没有差异 @Vall 让我知道您到底想做什么或想要什么【参考方案2】：我通过改变来做到这一点
.owl-carousel .owl-item
float: left;
justify-content:center;
margin:1.875em;
display:flex;
margin-right: 0.49%; -specific for every page
width: 100%;
height: 100%;
并在<div class="owl-carousel">中添加容器
现在我必须尝试使用任何桌面的宽度来扩展“容器”。 有什么想法吗？
【讨论】：
以上是关于如何在图库中的缩略图之间留出空间并且在所有浏览器中都相同？的主要内容，如果未能解决你的问题，请参考以下文章
如何获取存储在设备中的所有图像并将它们显示为 iPhone sdk 中的图库