浮動小数点の行の下にテキストを配置する方法

-1

私は初心者のウェブデザインの学生です。私は次の画像をコード化しようとしています。 see the snapshot of the image I am trying to code しかし、これは代わりにsee this screenshot of my work 浮動小数点の行の下にテキストを配置する方法

私は3つのボックス（それぞれ独自の子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; 
    }

私が何かアドバイスのためにとても感謝されます！おかげさまで

出典

2017-02-06 SLM

ようこそ。あなたの質問に[mcve]を入れてください。 – j08691

このような何か試してください：あなたのコードを見ずに

#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>

出典

2017-02-06 17:49:01

を、あなたが望む結果を得るための一つの方法は、以下のことを行うことです。

イメージごとにテキストを含む3つの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をクリアして通常の要素フローに戻るより複雑な方法です。この方法は実際には一般的に使用されています（または私は聞きました。私は初心者です）。

出典

2017-02-06 18:25:05

浮動小数点の行の下にテキストを配置する方法

答えて

関連する問題