Question

我是初学网页设计专业的学生。我正在尝试编写以下图像。 see the snapshot of the image I am trying to code 但这就是正在发生的事情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;
     }

我会非常感谢任何建议！感谢。

Answer 1

尝试这样的事情：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

创建三个DIV，其中包含每个图像的文本。在包含图像的DIV下创建这些DIV。
给第一个包含你的文本的DIV一个带有CSS属性的类＆＃34; clear：both;＆＃34;这将告诉此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/

注意：阅读更多关于所谓的＆＃34; clearfix＆＃34;在http://nicolasgallagher.com/micro-clearfix-hack/。这是清除第一个DIV并返回正常元素流的更复杂的方法。这种方法在实践中常用（或者我听说过......我是初学者）。

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

2 个答案: