Question

我连续3张图片，图片上覆盖了一些文字。我希望在这些图像下面有一个新的标题，标题上方的通常空间（图像和标题之间）。我已经尝试在标题中添加一个新行和一个div来给它填充，但似乎标题想要与它上面的图像保持一致。

在这里创建了一个jfiddle来说明我在“第二个标题”中遇到的问题，它需要在它和图片之间留出空间。 https://jsfiddle.net/wb7t5718/1/

这是代码

.imagecontainer {
  display: inline-block;
  float: left;
  /* important */
  position: relative;
  /* important(so we can absolutely position the   description div */
  padding-right: 12px;
}
.description {
  position: absolute;
  /* absolute position (so we can position it where we want)*/
  bottom: 0px;
  /* position will be on bottom */
  left: 0px;
  width: 220px;
  background-color: black;
  font-family: 'tahoma';
  font-size: 15px;
  color: white;
  opacity: 0.6;
  /* transparency */
  filter: alpha(opacity=60);
  /* IE transparency */
}
.description a {
  color: white;
}
p.description_content {
  padding: 10px;
  margin: 0px;
}

<h3>First title</h3>
<div class="imagecontainer">
  <img src="http://placehold.it/220x200" height="200" width="220" />
  <div class='description'>
    <p class='description_content'><a href="#">text</a>
    </p>
  </div>
</div>
<div class="imagecontainer">
  <img src="http://placehold.it/220x200" height="200" width="220" />
  <div class='description'>
    <p class='description_content'><a href="#">text</a>
    </p>
  </div>
</div>
<div class="imagecontainer">
  <img src="http://placehold.it/220x200" height="200" width="220" />
  <div class='description'>
    <p class='description_content'><a href="#">text</a>
    </p>
  </div>
</div>
<div class="row">
  <h3>Second title needs to be below pictures with space above it</h3>
</div>

Answer 1

简单地说＆＃34; br＆＃34;以上描述类。

<h3>First title</h3>
       <div class="imagecontainer">
    <img src="http://placehold.it/220x200" height="200" width="220" />
     <br><br><br><br>
    <div class='description'>
    <p class='description_content'><a href="#">text</a></p>
    </div>
  </div>
  <div class="imagecontainer">
   <img src="http://placehold.it/220x200" height="200" width="220" />
    <br><br><br><br>
    <div class='description'>
    <p class='description_content'><a href="#">text</a></p>
  </div>
  </div>
  <div class="imagecontainer">
    <img src="http://placehold.it/220x200" height="200" width="220" />
    <br><br><br><br>
    <div class='description'>
    <p class='description_content'><a href="#">text</a></p>
    </div>
  </div>
<div class="row">
<h3>Second title needs to be below pictures with space above it</h3>
</div>

Answer 2

只需将float: left;移至.imagecontainer即可尝试..

Answer 3

只需将clear:both添加到.row类即可清除div的浮动状态。并添加边距/填充顶部以获得顶部间距。

.row{
  clear:both;
  padding-top:5px;
}

在图像容器中的图像之后添加标题

3 个答案: