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

如何增加after-icons类的上边距？我把它增加到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/

Div内部div绝对定位和负边距重叠内容

3 个答案: