イメージプロセッサーのイメージの後にヘッダーを追加する

Question

イメージの上にテキストを重ねて3つのイメージが並んでいます。私はこれらの画像の下にヘッダーの上（画像とヘッダーの間）の通常のスペースを持つ新しいヘッダーが必要です。私はパディングを与えるためにタイトルにdivと同様に新しい行を追加しようとしましたが、タイトルはその上にある画像と一直線に並んでいたいと思うようです。

ここでは、「第2タイトル」の問題を説明するためにjfiddleを作成しました。そこには、画像と画像の間にスペースが必要です。ここ https://jsfiddle.net/wb7t5718/1/

コード

.imagecontainer { 
 
    display: inline-block; 
 
    float: left; 
 
    /* important */ 
 
    position: relative; 
 
    /* important(so we can absolutely position the description div */ 
 
    padding-right: 12px; 
 
} 
 
.description { 
 
    position: absolute; 
 
    /* absolute position (so we can position it where we want)*/ 
 
    bottom: 0px; 
 
    /* position will be on bottom */ 
 
    left: 0px; 
 
    width: 220px; 
 
    background-color: black; 
 
    font-family: 'tahoma'; 
 
    font-size: 15px; 
 
    color: white; 
 
    opacity: 0.6; 
 
    /* transparency */ 
 
    filter: alpha(opacity=60); 
 
    /* IE transparency */ 
 
} 
 
.description a { 
 
    color: white; 
 
} 
 
p.description_content { 
 
    padding: 10px; 
 
    margin: 0px; 
 
}

<h3>First title</h3> 
 
<div class="imagecontainer"> 
 
    <img src="http://placehold.it/220x200" height="200" width="220" /> 
 
    <div class='description'> 
 
    <p class='description_content'><a href="#">text</a> 
 
    </p> 
 
    </div> 
 
</div> 
 
<div class="imagecontainer"> 
 
    <img src="http://placehold.it/220x200" height="200" width="220" /> 
 
    <div class='description'> 
 
    <p class='description_content'><a href="#">text</a> 
 
    </p> 
 
    </div> 
 
</div> 
 
<div class="imagecontainer"> 
 
    <img src="http://placehold.it/220x200" height="200" width="220" /> 
 
    <div class='description'> 
 
    <p class='description_content'><a href="#">text</a> 
 
    </p> 
 
    </div> 
 
</div> 
 
<div class="row"> 
 
    <h3>Second title needs to be below pictures with space above it</h3> 
 
</div>

Answer 1

は、単に説明クラス上の "BR" を入れています。

<h3>First title</h3> 
     <div class="imagecontainer"> 
    <img src="http://placehold.it/220x200" height="200" width="220" /> 
    <br><br><br><br> 
    <div class='description'> 
    <p class='description_content'><a href="#">text</a></p> 
    </div> 
    </div> 
    <div class="imagecontainer"> 
    <img src="http://placehold.it/220x200" height="200" width="220" /> 
    <br><br><br><br> 
    <div class='description'> 
    <p class='description_content'><a href="#">text</a></p> 
    </div> 
    </div> 
    <div class="imagecontainer"> 
    <img src="http://placehold.it/220x200" height="200" width="220" /> 
    <br><br><br><br> 
    <div class='description'> 
    <p class='description_content'><a href="#">text</a></p> 
    </div> 
    </div> 
<div class="row"> 
<h3>Second title needs to be below pictures with space above it</h3> 
</div> 

Answer 2

だけfloat: left;.imagecontainerにを削除してみてください。..

Answer 3

だけのdivの浮きクリアする.rowクラスにclear:bothを追加します。マージン/パディングトップを上にスペースを追加するために追加します。

.row{ 
    clear:both; 
    padding-top:5px; 
}