响应式缩略图网格等间距 [英] Responsive thumbnail grid equal spacing
问题描述
我有一个缩略图网格：
.thumbnail-container {
border：1px solid red;
float：left;
宽度：25％; （取决于屏幕大小）
}
.thumbnail {
display：block;
height：auto;
width：200px;
margin：0 auto;
padding：0px;
}
你明白了......
有时候有5个大拇指，有时是4,3,2 ......在同一行，这取决于@media设备的屏幕宽度。
所以如图所示，我的问题是缩略图之间的水平间距。由于每个拇指容器的宽度相等（图片中的25％）并且缩略图居中，所以在第一和第二，第二至第三，第三至第四之间有两倍的间隔。相反，第一个拇指的左边有一半的空间，第四个拇指的右边是这个空间： 就像这样：1（A）2（ B）2（C）2（D）1 b 我想要这样：1（A）1（B）1（C）1（D）1 有关如何使间隔相同的任何想法？ 非常感谢！ 我做了这个响应式网格，它使用CSS来完成您所需要的功能。 水平和垂直边距是等于。 FIDDLE <它显示你可以使用计算来将网格元素放置在彼此之间具有相等边距的位置上。元素和窗口之间的边距也是相同的。 宽度超过751px的屏幕代码虽然尚未写入，但您明白了。以下是代码： HTML： CSS： I have a grid of thumbnails: you get the idea... Sometimes there are 5 thumbs, sometimes 4, 3, 2... in the same row depending on the @media device screen width. So as you can see in the picture, my problem is the horizontal spacing between the thumbnails. Since the width of each thumb-container is equal (25% in the picture) and thumbnails are centered, there is double spacing betwet 1st and 2nd, 2nd-3d, 3rd-4th. On the contrary, the 1st thumb has half of that space to the left, and the 4th has it to the right: It's like this: 1(A)2(B)2(C)2(D)1 And I want it like this: 1(A)1(B)1(C)1(D)1 Any ideas of how to make the spacing the same? Many thanks! I made this responsive grid that does what you need using CSS.
It uses media queries and nth-child(). The horizontal and vertical margins are equal. It shows you can use calculation to position grid elements with equal margins between each other. The margin between elements and window is also the same. Code for screens wider than 751px isn't written yet though but you get the idea. Here is the code : HTML : CSS :
这篇关于响应式缩略图网格等间距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
它使用媒体查询和 nth-child（）。
< div id =container>
< div class =wrap>
< div class =foto> 1< / div>
< / div>
< div class =wrap>
< div class =foto> 2< / div>
< / div>
< div class =wrap>
< div class =foto> 3< / div>
< / div>
...等等...
< / div>
html，body {
margin：0;
padding：0;
最小宽度：150px;
}
.wrap {
float：left;
职位：亲属;
}
.foto {
width：150px;
height：150px;
背景：黄金;
位置：绝对;
$ b #warning {display：none;}
@media screen and（min-width：631px）{
.wrap {
width： 20％;
padding-bottom：25％;
}
.wrap：nth-child（4n + 2），.wrap：nth-child（4n + 3）{
}
.wrap .foto {
top：-75px;
margin-top：100％;
正确：-30px;
}
.wrap：nth-child（4n + 2）{
保证金：0 5％0 7.5％;
}
.wrap：nth-child（4n + 3）{
margin-right：7.5％;
}
.wrap：nth-child（4n + 2）.foto {
left：50％;
margin-left：-75px;
}
.wrap：nth-child（4n + 3）.foto {
right：50％;
margin-right：-75px;
}
.wrap：nth-child（4n）.foto {
left：-30px;
}
#container {
margin-top：-45px;
}
}
@media screen and（min-width：481px）and（max-width：631px）{
.wrap {
width ：25％;
垫底：33.3％;
}
.wrap：nth-child（3n + 2）{
margin：0 12.5％;
}
.wrap .foto {
top：-75px;
margin-top：100％;
right：-37px;
}
.wrap：nth-child（3n + 2）.foto {
left：50％;
margin-left：-75px;
}
.wrap：nth-child（3n）.foto {
left：-37px;
}
#container {
margin-top：-37px;
$ b @media screen和（min-width：331px）和（max-width：480px）{
.wrap {
宽度：33.3％;
填充底部：50％;
clear：left;
}
.wrap：nth-child（偶数）{
float：right;
明确：正确;
}
.wrap .foto {
top：-75px;
margin-top：100％;
正确：-50px;
}
.wrap：nth-child（偶数）.foto {
left：-50px;
}
.wrap：nth-child（4n + 3）.foto，.wrap：nth-child（4n + 4）.foto {
bottom：-75px;
margin-bottom：100％;
}
#container {
margin-top：-25px;
}
}
@media screen和（max-width：330px）{
.wrap {
width：50％;
padding-bottom：100％;
clear：left;
}
.wrap：nth-child（奇数）.foto {
right：-75px;
bottom：0;
底部：-75px;
margin-bottom：100％;
}
.wrap：nth-child（偶数）.foto {
top：0px;
正确：-75px;
top：-75px;
margin-top：100％;
}
}
@media screen and（min-width：751px）{
#warning {
color：#fff;
display：block;
位置：固定;
宽度：100％;
身高：50％;
top：25％;
剩下：0;
背景：＃000;
text-align：center;
font-size：30px;
}
.thumbnail-container {
border: 1px solid red;
float: left;
width: 25%; (depending on screen size)
}
.thumbnail {
display: block;
height: auto;
width: 200px;
margin: 0 auto;
padding: 0px;
}
<div id="container">
<div class="wrap">
<div class="foto">1</div>
</div>
<div class="wrap">
<div class="foto">2</div>
</div>
<div class="wrap">
<div class="foto">3</div>
</div>
... And so on ...
</div>
html, body {
margin:0;
padding:0;
min-width:150px;
}
.wrap {
float:left;
position:relative;
}
.foto {
width: 150px;
height: 150px;
background: gold;
position:absolute;
}
#warning{display:none;}
@media screen and (min-width: 631px) {
.wrap {
width:20%;
padding-bottom:25%;
}
.wrap:nth-child(4n+2), .wrap:nth-child(4n+3){
}
.wrap .foto {
top:-75px;
margin-top:100%;
right:-30px;
}
.wrap:nth-child(4n+2){
margin:0 5% 0 7.5%;
}
.wrap:nth-child(4n+3){
margin-right:7.5%;
}
.wrap:nth-child(4n+2) .foto{
left:50%;
margin-left:-75px;
}
.wrap:nth-child(4n+3) .foto{
right:50%;
margin-right:-75px;
}
.wrap:nth-child(4n) .foto{
left:-30px;
}
#container{
margin-top:-45px;
}
}
@media screen and (min-width: 481px) and (max-width: 631px) {
.wrap {
width:25%;
padding-bottom:33.3%;
}
.wrap:nth-child(3n+2){
margin:0 12.5%;
}
.wrap .foto {
top:-75px;
margin-top:100%;
right:-37px;
}
.wrap:nth-child(3n+2) .foto{
left:50%;
margin-left:-75px;
}
.wrap:nth-child(3n) .foto{
left:-37px;
}
#container{
margin-top:-37px;
}
}
@media screen and (min-width: 331px) and (max-width: 480px) {
.wrap {
width:33.3%;
padding-bottom:50%;
clear:left;
}
.wrap:nth-child(even) {
float:right;
clear:right;
}
.wrap .foto {
top:-75px;
margin-top:100%;
right:-50px;
}
.wrap:nth-child(even) .foto {
left:-50px;
}
.wrap:nth-child(4n+3) .foto, .wrap:nth-child(4n+4) .foto {
bottom:-75px;
margin-bottom:100%;
}
#container{
margin-top:-25px;
}
}
@media screen and (max-width: 330px) {
.wrap {
width:50%;
padding-bottom:100%;
clear:left;
}
.wrap:nth-child(odd) .foto {
right:-75px;
bottom:0;
bottom:-75px;
margin-bottom:100%;
}
.wrap:nth-child(even) .foto {
top:0px;
right:-75px;
top:-75px;
margin-top:100%;
}
}
@media screen and (min-width: 751px) {
#warning{
color:#fff;
display:block;
position:fixed;
width:100%;
height:50%;
top:25%;
left:0;
background:#000;
text-align:center;
font-size:30px;
}
