css - 如何在我的画廊中的缩略图之间设置相同的大小？
问题描述
目前，缩略图之间的距离是不同的。我想设置5像素的距离。我尝试了一些代码，但它不起作用。如何在我的画廊中的缩略图之间设置相同的大小？
------------------------style.css------------------------ ------
#about,
#screenshot,
#divider,
#pricing,
#newsletter {
padding-top: 100px;
padding-bottom: 100px;
}
/*---------------------------------------
Screenshot section
-----------------------------------------*/
#screenshot .col-md-3 {
display: block;
width: 100%;
padding-bottom: 1rem;
}
#screenshot img {
background-color: #ffffff;
box-shadow: 0px 1px 2px 0px #25605B;
cursor: pointer;
display: block;
margin-top: 20px;
margin-bottom: 20px;
position: relative;
top: 0px;
transition: all 0.4s ease-in-out;
}
#screenshot img:hover { /*box shadow*/
box-shadow: 0px 16px 10px 0px rgba(0, 0, 0, 0.3);
top: -6px;
}
.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
opacity: 0;
-webkit-backface-visibility: hidden;
/* ideally, transition speed should match zoom duration */
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.mfp-with-zoom.mfp-ready .mfp-container {
opacity: 1;
}
.mfp-with-zoom.mfp-ready.mfp-bg {
opacity: 0.8;
}
.mfp-with-zoom.mfp-removing .mfp-container,
.mfp-with-zoom.mfp-removing.mfp-bg {
opacity: 0;
}
/*Size between photos*/
.div1 {
width: 300px;
height: 400px;
border: 1px solid black;
}
.div2 {
width: 600px;
height: 400px;
}---------------------owl.carousel.css------------------------ --------
/* clearfix */
.owl-carousel .owl-wrapper:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
/* display none until init */
.owl-carousel{
display: none;
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;
margin: 5px;
}
.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);
}-------------html-------------- ----
<!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>
<!-- Additional CSS Files -->
<link rel="stylesheet" type="text/css" href="assets/css/font-awesome.css"> <!-- font and icon -->
<link rel="stylesheet" href="../assets/css/template.css"> <!-- menu -->
<link rel="stylesheet" href="gallery/assets/css/main.css" />
<!-- gallery -->
<link rel="stylesheet" href="../interior/css/bootstrap.min.css">
<link rel="stylesheet" href="../interior/css/animate.css">
<link rel="stylesheet" href="../interior/css/font-awesome.min.css">
<link rel="stylesheet" href="../interior/css/magnific-popup.css">
<link rel="stylesheet" href="../interior/css/owl.theme.css">
<link rel="stylesheet" href="../interior/css/owl.carousel.css">
<!-- Main css -->
<link rel="stylesheet" href="../interior/css/style.css">
</head>
<body>
<!-- ***** Preloader Start ***** -->
<div id="preloader">
<div class="jumper">
<div></div>
<div></div>
<div></div>
</div>
</div>
<!-- ***** Preloader End ***** -->
<!-- ***** Header Area Start ***** -->
<header class="header-area header-sticky">
<div class="container">
<div class="row">
<div class="col-12">
<nav class="main-nav">
<!-- ***** Logo Start ***** -->
<a href="index.html" >
<img src="gallery/logo.png">
</a>
<!-- ***** Logo End ***** -->
<!-- ***** Menu Start ***** -->
<ul class="nav">
<li class="scroll-to-section"><a href="../index.html" class="active"><b>Home</b></a></li>
<li class="scroll-to-section"><a href="../about/about.html">About</a></li>
<li class="scroll-to-section"><a href="#projects">Buy</a></li>
<li class="scroll-to-section"><a href="../contact/contact.html">Contact</a></li>
<!-- instagram icon -->
<li class="scroll-to-section"><a href="https://...." target="_blank"><i class="fa fa-instagram" style="font-size:20px"></i></a></li>
</ul>
<a class='menu-trigger'>
<span>Menu</span>
</a>
<!-- ***** Menu End ***** -->
</nav>
</div>
</div>
</div>
<!-- arrow icon -->
<div class="arrow"><a href="../index.html"><i class="fa fa-angle-double-left" style="color:gray"></i></a></div>
</header>
<!-- ***** Header Area End ***** -->
<!-- ***** Main Banner Area Start ***** -->
<div class="Modern-Slider">
<!-- Item -->
<div class="item">
<div class="img-fill">
</div>
</div>
</div>
<!-- ***** Content Gallery ********************************************************************************** -->
<!-- Wrapper -->
<!-- Main -->
<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="images/1.jpg" class="image-popup">
<img src="images/interiorsm.jpg" class="img-responsive div2" alt="screenshot" > <!-- div2 horizontaal -->
</a>
</div>
<p></p>
<div class="item col-md-3 col-sm-3 wow fadeInUp" data-wow-delay="0.9s"> <!-- div1 verticaal -->
<a href="images/2.jpg" class="image-popup">
<img src="images/2.jpg" class="img-responsive div1" alt="screenshot">
</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="images/3.jpg" class="img-responsive div1" alt="screenshot">
</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="images/4.jpg" class="img-responsive div1" alt="screenshot">
</a>
</div>
<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="images/5.jpg" class="img-responsive div2" alt="screenshot">
</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="images/6.jpg" class="img-responsive div2" alt="screenshot">
</a>
</div>
<p></p>
<div class="item col-md-3 col-sm-3 wow fadeInUp" data-wow-delay="0.9s">
<a href="images/7.jpg" class="image-popup">
<img src="images/7.jpg" class="img-responsive div2" alt="screenshot">
</a>
</div>
<p></p>
<div class="item col-md-3 col-sm-3 wow fadeInUp" data-wow-delay="0.9s">
<a href="images/8.jpg" class="image-popup">
<img src="images/8.jpg" class="img-responsive div2" alt="screenshot">
</a>
</div>
<p></p>
<div class="item col-md-3 col-sm-3 wow fadeInUp" data-wow-delay="0.9s">
<a href="images/9.jpg" class="image-popup">
<img src="images/9.jpg" class="img-responsive div1" alt="screenshot">
</a>
</div>
<p></p><p></p>
</div>
</section>
<!-- Footer -->
<footer id="footer">
<p><div class="a">© Copyright of all photography on this site belongs to the respective photographer.
<br>No use may be made of any of the photographs without the express permission of the photographer.
<br>Design: <a href="#">.....</a>.</div></p>
</footer>
<!-- ***** End Content Gallery ************************************************************ -->
<!-- jQuery -->
<script src="assets/js/jquery-2.1.0.min.js"></script>
<!-- Plugins -->
<script src="assets/js/owl-carousel.js"></script>
<script src="assets/js/scrollreveal.min.js"></script>
<script src="assets/js/waypoints.min.js"></script>
<!-- gallery -->
<script src="../interior/js/jquery.js"></script>
<script src="../interior/js/bootstrap.min.js"></script>
<script src="../interior/js/jquery.magnific-popup.min.js"></script>
<script src="../interior/js/magnific-popup-options.js"></script>
<script src="../interior/js/owl.carousel.min.js"></script>
<script src="../interior/js/smoothscroll.js"></script>
<script src="../interior/js/wow.min.js"></script>
<script src="../interior/js/custom.js"></script>
<script src="assets/js/slick.js"></script>
<script src="assets/js/isotope.js"></script>
<!-- Global Init -->
<script src="assets/js/custom.js"></script>
</body>
</html>解决方案
使用 flexbox 和child:not(:last-child)选择器来应用边距。
.parent{
display: flex;
flex-direction: row;
}
.child:not(:last-child){
margin-right: 5px;
}<div class="parent">
<div class="child"><img src="https://picsum.photos/id/100/200/200" /></div>
<div class="child"><img src="https://picsum.photos/id/100/200/200" /></div>
<div class="child"><img src="https://picsum.photos/id/100/200/200" /></div>
<div class="child"><img src="https://picsum.photos/id/100/200/200" /></div>
</div>推荐阅读
- css - 带有无效边框颜色的边框如何工作？
- arduino - BLE CSC 服务并不总是被检测到 - 正确设置？
- reactjs - 修复 React JS 上的编辑功能很热门？
- c# - C# 中的隐式类型转换
- android - java.lang.RuntimeException：从@HiltAndroidTest 生成的 Hilt 类丢失
- android - 我已经从平台工具中删除了 adb 文件
- javascript - 如何为特定国家/地区运行 JavaScript 文件？
- python - 如何安排 python 电报机器人在特定时间/之后发送消息？
- django - 在 React Native 应用程序中显示来自 Django 的数据
- python-3.x - Seaborn：如何增加轴上标签的字体大小？