Question

我试图在我网站上的图库中添加10px间距。我使用Wordpress自定义主题和集成的“页面构建器”，用于创建包含短代码的投资组合帖子（不确定这是否有用！）

目前，图像采用零间距的网格布局 - 请参见下图。

我想在每张图片之间添加一个10px的间距，但不会在页面为全宽的外侧添加间距 - 请参阅下面的图片我希望它看起来如何。

有人能帮我修改CSS来实现这个目标吗？我已经尝试了好几天，但它超出了我的基本CSS能力。

任何帮助都将非常感激！

这是有问题的CSS代码：

＆＃13;

/*	Gallery
------------------------------------------------*/
.sr-gallery {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100%;
	overflow: hidden;
}

.sr-gallery.gallery-col3 { width: 100.5%; }
	
.sr-gallery li {
	margin: 0;
	padding: 0;
	float: left;
	width: 33.33%;
	overflow: hidden;
	text-align: center;
}
	
.gallery-col1 li { width: 100%;  }
.gallery-col2 li { width: 50%;  }
.gallery-col3 li { width: 33.33%;  }
.gallery-col4 li { width: 25%;  }
.gallery-col5 li { width: 20%;  }
.gallery-col6 li { width: 16.66%;  }
	
.sr-gallery li a  {
	display: inline-block;
	max-width: 100%;
}

＆＃13;

<ul class="sr-gallery gallery-col1">
  <li><img src="http://chatsingh.com/wp-content/uploads/2016/08/Secret7-003-1.jpg" alt=""></li>
</ul>

<ul class="sr-gallery gallery-col2">
  <li style="
    border-right: 5px solid #fff;
"><img src="http://chatsingh.com/wp-content/uploads/2016/11/Secret7-007-1100x800.jpg" alt=""></li>
  <li><img src="http://chatsingh.com/wp-content/uploads/2016/08/Secret7-001-1-1100x800.jpg" alt="" style="
    box-shadow: inset 10px 0 0 0 #fff;
"></li>
</ul>

<ul class="sr-gallery gallery-col1">
  <li><img src="http://chatsingh.com/wp-content/uploads/2016/08/Secret7-004-1.jpg" alt=""></li>
</ul>

＆＃13;

Answer 1

在您的情况下（基于您的图片），您可以像这样使用Flexbox：

＆＃13;

body {
  margin: 0;
}

.container {
  display: flex; 
  flex-wrap: wrap;
}

.child {
  display: inline-block;
  background: #3794fe;
  flex: 1 1 auto;
  height: 100px;
  margin-bottom: 10px;
}

.child.col-1,
.child.col-4 {
  width: 100%;
}

.child.col-2 {
  margin-right: 10px;
}

.child:last-child {
  margin-bottom: 0;
}

＆＃13;

<div class="container">
  <div class="child col-1"></div>
  <div class="child col-2"></div>
  <div class="child col-3"></div>
  <div class="child col-4"></div>
</div>

＆＃13;

Answer 2

你可以使整个画廊比屏幕宽10px并且有5px填充（这是连续两个图像）。

或者，您可能在图像周围有填充物，左图像的水平相对位置为-5px，右图像水平相对位置为+ 5px。棘手的部分是使填充/偏移正确，以便中心的分离也是10px。

Answer 3

我想，你可以试试这个：

.sr-gallery img {
  padding: 10px;
}

由于您没有发布实际的工作示例，我不能说它会不会或不会起作用。

Answer 4

如果我们使用box-sizing: border-box;，那么您可以在不破坏布局的情况下将边框应用于特定元素。

.sr-gallery li {
    margin: 0;
    padding: 0;
    float: left;
    width: 33.33%;
    overflow: hidden;
    text-align: center;
    border-bottom: 10px solid white;
    box-sizing: border-box;
}

.gallery-col2 li {
    width: 50%;
    border-right: 5px solid white;
}

.gallery-col2 li + li {
    border-left: 5px solid white;
    border-right: none;
}

CSS：如何在图像之间添加10px？

4 个答案: