div里面的div绝对定位和负边距重叠内容

Question

我在另一个 div 中有一个 div，我想要实现的效果是经典的三个产品图标彼此相邻，下面有一些说明性文字。

文本 div 的内容不会下推以下内容并与其重叠。我尝试了许多不同的解决方案，但在这种情况下我没有找到任何可行的方法。

恐怕内层div的绝对定位和负边距会比较难。

如果有任何建议，我将不胜感激。谢谢！

HTML

    <div class="icon-group">
        <div class="icon">
          <i class="fa fa-book fa-4x" aria-hidden="true"></i>
          <div class="icon-caption">Astonishment tendrils of gossamer clouds the carbon in our apple pies made in the interiors of collapsing stars.</div>
        </div>
        <div class="icon">
          <i class="fa fa-plane fa-4x" aria-hidden="true"></i>
          <div class="icon-caption">Astonishment tendrils of gossamer clouds the carbon in our apple pies made in the interiors of collapsing stars.</div>
        </div>
        <div class="icon">
          <i class="fa fa-quote-right fa-4x" aria-hidden="true"></i>
          <div class="icon-caption">Astonishment tendrils of gossamer clouds the carbon in our apple pies made in the interiors of collapsing stars.</div>
        </div>
      </div>
   <div class="clear"></div>
   <h3 class="after-icons">What people say about me</h3>

CSS

.icon-group, icon-caption-group {
  height: 100px; display: table; width:100%; table-layout: fixed}
.icon, .icon-caption {
  display: table-cell; 
  text-align: center; 
  vertical-align: middle; 
  position: relative;}

.icon-caption {
  border-bottom: 3px solid #E8EAF6; 
  vertical-align: middle; 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  width: 50%; 
  margin: -15% 0 0 -25%; 
  margin-top: 20%;
}

.after-icons {
  margin-top: 30px
}

Answer 1

你不需要定位你可以像这样简单做的内容，检查下面的sn-p

.icon-group, icon-caption-group {height: 100px; display: table; width:100%; table-layout: fixed}
.icon, .icon-caption {
display: table-cell; 
text-align: center; 
vertical-align: middle; 
position: relative;}

.icon-caption {
border-bottom: 3px solid #E8EAF6; 
vertical-align: middle; 
display: block;
margin: 0 auto;
width: 50%; 
}

.after-icons {
margin-top: 30px
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="icon-group">
        <div class="icon">
          <i class="fa fa-book fa-4x" aria-hidden="true"></i>
          <div class="icon-caption">Astonishment tendrils of gossamer clouds the carbon in our apple pies made in the interiors of collapsing stars.</div>
        </div>
        <div class="icon">
          <i class="fa fa-plane fa-4x" aria-hidden="true"></i>
          <div class="icon-caption">Astonishment tendrils of gossamer clouds the carbon in our apple pies made in the interiors of collapsing stars.</div>
        </div>
        <div class="icon">
          <i class="fa fa-quote-right fa-4x" aria-hidden="true"></i>
          <div class="icon-caption">Astonishment tendrils of gossamer clouds the carbon in our apple pies made in the interiors of collapsing stars.</div>
        </div>
      </div>
   <div class="clear"></div>
   <h3 class="after-icons">What people say about me</h3>

Answer 2

增加后图标类的上边距怎么样？我已将其增加到 130，这会将文本推到 div 下方。

Answer 3

您的 css 会导致一个非常困难的情况，即尝试根据绝对定位子级的大小来扩展父级（图标类），最好避免 Make absolute positioned div expand parent div height

让你的 html 标记保持不变，擦除你的清晰 div 和你的 css 变得非常简单

您需要做的就是对图标类应用填充或边距以分隔图标

.icon {
  float: left;
  width: 33%;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="icon-group">
        <div class="icon clearfix">
          <i class="fa fa-book fa-4x" aria-hidden="true"></i>
          <div class="icon-caption">Astonishment tendrils of gossamer clouds the carbon in our apple pies made in the interiors of collapsing stars.</div>
        </div>
        <div class="icon clearfix">
          <i class="fa fa-plane fa-4x" aria-hidden="true"></i>
          <div class="icon-caption">Astonishment tendrils of gossamer clouds the carbon in our apple pies made in the interiors of collapsing stars.</div>
        </div>
        <div class="icon clearfix">
          <i class="fa fa-quote-right fa-4x" aria-hidden="true"></i>
          <div class="icon-caption">Astonishment tendrils of gossamer clouds the carbon in our apple pies made in the interiors of collapsing stars.</div>
        </div>
      </div>
   <h3 class="after-icons">What people say about me</h3>

注意：旧浏览器通常需要 clearfix，我选择了最简单的实现，但如果您想支持非常旧的浏览器，请搜索 clearfix

这是一个有效的 jsfiddle https://jsfiddle.net/GiorgosK/x3evnxpn/