Question

尝试将我的三个数字对齐，例如：图像与3个图像中的每个图像下方的标题和描述。这目前有效，但我有高度问题。即如果<p>描述的长度不同，则数字将从不同的点开始，因此帧不再相互对齐。我回顾了旧帖子，发现了某种显示方式：flex解决方案，但我并不是真的理解/喜欢它。有什么建议吗？

HTML

<section class = "container site-repairs">


    <figure>
    <img src = "repair1.png"/>

    <h3>Rof Repair</h3>
    <p> Concrete, Slate, Felt or Fibreglass Cormack Roofing can repair any roofing problems you have
        Skylights Extra lighting can make all the difference in your home please contact 
    </p>
    </figure>

    <figure>
    <img src = "repair2.png"/>
    <h3>Skylights</h3>
    <p> 
        Extra lighting can make all the difference in your home please contact us to find out more
    </p>
    </figure>

    <figure>
    <img src = "repair3.png"/>
    <h3>Gutters/Facias</h3>
    <p> Gutters and Facia boards play an important part in keeping your home dry</p>
    </figure>


</section>

CSS

.site-repairs{
    text-align:center;
    padding:0;
}

.site-repairs figure{
    display:inline-block;
    padding:0;

}

.site-repairs img{

}
.site-repairs h3{
    margin:0;
    padding:0;
    padding-top:5px;
}
.site-repairs p{
    padding:0;
    margin:0;
    width:131px;
    word-wrap:break-word;
    font-size:13px;
    margin-top:15px;
    color:grey;
}

Answer 1

对于所有3个图像和描述，您可以将它们包装起来并将显示设置为flex，以便将它们对齐居中。之后，您可以将每个图像的描述放在3个容器中，这个容器也将显示为flex，您可以将其flex-direction设置为列，这样您就可以将它们放在另一个容器旁边，当然也可以将它们对齐居中。

Answer 2

试试这个：

使站点修复类的位置相对并且其中的内容绝对解决了问题。使位置：绝对的数字将对齐所有元素，并为每个元素添加边距将固定每个数字位置。

HTML：

<figure style = "margin-left: 20%">
<img src = "https://freeiconshop.com/wp-content/uploads/edd/code-flat.png"/>

<h3>Rof Repair</h3>
<p> Concrete, Slate, Felt or Fibreglass Cormack Roofing can repair any roofing problems you have
    Skylights Extra lighting can make all the difference in your home please contact 
</p>
</figure>

<figure style = "margin-left: 40%">
<img src = "https://cdn3.iconfinder.com/data/icons/luchesa-vol-9/128/Html-512.png"/>
<h3>Skylights</h3>
<p> 
    Extra lighting can make all the difference in your home please contact us to find out more
</p>
</figure>

<figure style = "margin-left: 60%">
<img src = "http://www.iconsdb.com/icons/preview/caribbean-blue/code-optimization-2-xxl.png"/>
<h3>Gutters/Facias</h3>
<p> Gutters and Facia boards play an important part in keeping your home dry</p>
</figure>

CSS：

 .site-repairs{

    padding:0;
  position: relative;
}

.site-repairs figure{
    display:inline-block;
    padding:0;
  position: absolute;

}


.site-repairs h3{
    margin:0;
    padding:0;
    padding-top:5px;
}
.site-repairs p{
    padding:0;
    margin:0;
    width:131px;
    word-wrap:break-word;
    font-size:13px;
    margin-top:15px;
    color:grey;
}
img {
  width: 40px;
}

我使用了一些随机图像进行显示。

将3个图像与下面的标题和描述对齐

2 个答案: