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

你不需要，你可以简单地做像这样的内容定位，与下面片段

.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标记相同，擦掉你的规模扩大父（图标类）一个非常困难的局面明确的股利和你的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/