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

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

简单的把“br”放在描述类上面。

<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>