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

【问题标题】：Adding a header after images in an imagecontainer在图像容器中的图像之后添加标题
【发布时间】：2017-01-06 06:19:32
【问题描述】：

我连续有 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>

【问题讨论】：

我不明白你想要什么，但我想你不会喜欢这个：jsfiddle.net/wb7t5718/2
完美，谢谢！

标签： css twitter-bootstrap

【解决方案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>

【讨论】：

@AndyB 请试试这个并告诉我。

【解决方案2】：

只需将float: left; 删除为.imagecontainer 并尝试..

【讨论】：

【解决方案3】：

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

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

【讨论】：