如何在一行浮动div下对齐文本答案

【问题标题】：How to align text under a row of floating divs如何在一行浮动div下对齐文本
【发布时间】：2017-02-09 03:35:16
【问题描述】：

我是一名初学网页设计的学生。我正在尝试对以下图像进行编码。但这就是正在发生的事情see this screenshot of my work

我创建了包含三个框（每个框都有自己的子 div）和文本的父 div，并将它们浮动。现在如何让文本留在父 div 底部的框下方？我尝试了绝对位置，但它没有用。有人对我有什么想法吗？这是我的 HTML：

    <div>
            <div class="box" id="standard">
                <i class="fa fa-clock-o" aria-hidden="true"></i>
                <p>Standard</p>
            </div>
            <p>Triggered by a contact's time of enrollment, like joining a smart list or filling out a form.</p>
        </div>
        <div>
            <div class="box">
                <i class="fa fa-calendar" aria-hidden="true"></i>
                <p>Fixed Date</p>
            </div>
            <p>Triggered by a calendar date, like a webinar, conference, or holiday.</p>
        </div>
        <div>
            <div class="box">   
                <i class="fa fa-user" aria-hidden="true"></i>
                <p>Property Based</p>
            </div>
            <p>Triggered by a contact date property, like a trial expiration date or renewal date.</p>
        </div>

还有我的 CSS：

     .box {
     height: 184px;
     width: 187px;
     border: 1px solid #00a4bd;
     moz-border-radius: 4px;
    -webkit-border-radius: 4px;
     text-align: center;
     line-height: 80px;
     margin: 0 20px 20px 0;
     font-size: 18px;
     float: left;
     }

     #standard {
     border: 2px solid #00a4bd;
     background-color: #e5f5f8;
     }

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

【问题讨论】：

欢迎来到 SO。请在您的问题中输入minimal reproducible example。

标签： html css alignment

【解决方案1】：

试试这样的：

#box{width:200px;
height:200px;
border:1px solid #454545;}
#description{position:relative;
 top:100%;}

<div id="box">

<div id="description">descripttion of the box </div>
</div>

【讨论】：

【解决方案2】：

在不查看您的代码的情况下，获得所需结果的一种方法是执行以下操作。

创建三个包含每个图像的文本的 DIV。在包含图像的 DIV 下创建这些 DIV。
为包含您的文本的第一个 DIV 提供一个具有 CSS 属性“clear: both;”的类这将告诉此 DIV 停止向左浮动（或环绕其他浮动元素）并遵循正常的元素流。

因此，文本应位于图像下方，前提是带有文本的 DIV 与带有图像的 DIV 具有相同的宽度属性。请在下面找到一个示例。

<!DOCTYPE html>
<html>
<head>
<style>
div {
    float: left;
    border: red solid 1px; 
    width: 20%;
    overflow: hidden;
}

img {
  width: 100%;
}

.clear {
    clear: both;
}
</style>
</head>
<body>
    <div> 
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/63/Noto_Project_Christmas_Tree_Emoji.svg/2000px-Noto_Project_Christmas_Tree_Emoji.svg.png">  
    </div>
    <div> 
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/63/Noto_Project_Christmas_Tree_Emoji.svg/2000px-Noto_Project_Christmas_Tree_Emoji.svg.png">  
    </div>
    <div> 
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/63/Noto_Project_Christmas_Tree_Emoji.svg/2000px-Noto_Project_Christmas_Tree_Emoji.svg.png">  
    </div>

<div class="clear">My christmas tree </div>
<div>My christmas tree </div>
<div>My christmas tree </div>


</body>
</html>

查看实际操作：https://jsfiddle.net/gbq0xf8b/

注意：在http://nicolasgallagher.com/micro-clearfix-hack/ 阅读有关所谓“clearfix”的更多信息。这是清除第一个 DIV 并返回正常元素流的更精细的方法。这种方法在实践中很常用（或者我听说..我是初学者）。

【讨论】：