Question

我有3张并排的图片，我想知道如何在它们之间留出一些间距。我已经尝试了所有的东西，边距，填充，我不知道该怎么做。

＆＃13;

.content1 {
  background-image: url("http://www.thefreeloves.com/prototype/test/wp-content/uploads/2014/02/album-title.jpg");
  color: white;
  text-align: center;
  width: 100%;
  height: 20%;
  display: block;
  float: left;
}
.text1 {
  font-family: "Goudy Old Style", Optima, sans-serif;
  font-size: 40px;
  margin-bottom: 0;
  margin-top: 45px;
}
.text2 {
  font-size: 30px;
  color: #6CB9D9;
}
.album1 {
  float: left;
  width: 31%;
  text-align: center;
}
.album2 {
  display: inline-block;
  width: 31%;
  text-align: center;
}
.album3 {
  float: right;
  width: 31%;
  text-align: center;
}
.album {
  width: 100%;
  overflow: hidden;
  background-color: #191919;
}

＆＃13;

<div class="content1">
  <h3 class="text1">Our Latest Album<span class="slash">   /   </span><span class="text2">Fresh from the house of Music Club Band</span></h3>
</div>
<div class="album">
  <div class="album1">
    <img src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/FDA9133-650x385.jpg" alt="album1">
  </div>
  <div class="album2">
    <img src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/FDA9099-650x385.jpg" alt="album2">
  </div>
  <div class="album3">
    <img src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/FDA0373-650x385.jpg" alt="album3" class="album4">
  </div>
</div>

＆＃13;

Answer 1

在每个div标签中，只需放置以下style =“margin-right：20px;”。例如，对于第一张图片，请将其更改为

div style =“margin-right：20px;”类= “album1” ＆GT;

Answer 2

您不需要使用float，只需将相册的display设置为inline-block，并将其父级的text-align设置为center。请注意，这三张图片太宽而不能排成一行，因此您必须自己调整。

.album1 img, .album2 img, .album3 img {
     //set img width and height here
}
.album1 {
  display: inline-block;
  //add padding/margin here
}
.album2 {
  display: inline-block;
  //add padding/margin here
}
.album3 {
  display: inline-block;
  //add padding/margin here
}
.album {
  width: 100%;
  overflow: hidden;
  background-color: #191919;
  text-align:center;
}

Answer 3

您将包装div设置为31％，但您没有更改图像的大小，因此它们在包装外流动。如果设置溢出：隐藏;在你的album1，album2和album3 div上，你会看到你的边缘正在处理div，但你只能看到你的部分图像。如果你将imgs自己设置为100％的宽度，你将会看到它的工作原理。

＆＃13;

.content1 {
  background-image: url("http://www.thefreeloves.com/prototype/test/wp-content/uploads/2014/02/album-title.jpg");
  color: white;
  text-align: center;
  width: 100%;
  height: 20%;
  display: block;
  float: left;
}
.text1 {
  font-family: "Goudy Old Style", Optima, sans-serif;
  font-size: 40px;
  margin-bottom: 0;
  margin-top: 45px;
}
.text2 {
  font-size: 30px;
  color: #6CB9D9;
}
.album1 {
  float: left;
  width: 31%;
  text-align: center;
  margin: 1%;
}
.album2 {
  display: inline-block;
  width: 31%;
  text-align: center;
  margin: 1%;
}
.album3 {
  float: right;
  width: 31%;
  text-align: center;
  margin: 1%;
}
.album {
  width: 100%;
  overflow: hidden;
  background-color: #191919;
}

.album img { width: 100%; }

＆＃13;

<div class="content1">
  <h3 class="text1">Our Latest Album<span class="slash">   /   </span><span class="text2">Fresh from the house of Music Club Band</span></h3>
</div>
<div class="album">
  <div class="album1">
    <img src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/FDA9133-650x385.jpg" alt="album1">
  </div>
  <div class="album2">
    <img src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/FDA9099-650x385.jpg" alt="album2">
  </div>
  <div class="album3">
    <img src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/FDA0373-650x385.jpg" alt="album3" class="album4">
  </div>
</div>

＆＃13;

图像之间的间距

3 个答案: