Divに含まれていないImg

Question

私は基本的にタイトル、画像、説明、およびいくつかのソーシャルメディアボタンを含むdivを作成しようとしています。私はウェブサイト上の同じdivの複数のインスタンスが欲しい。チームのページを満たすような並べ替えを作成します。しかし、私はすべてを適切に配置するつもりはありません。 Mozilla Firefoxのエディタを使用して、私はイメージがdivに含まれていないことを認識します。これの原因は何でしょうか？私はそれらの間に隙間を空けて次々と整列させたい。 Webページの

現在のビュー：Webページに含まれていない

本部：

HTMLスニペット：

<div> 
    <h2> DJ Name 1 </h2> 
<img class="djimage" src="dj1.png" alt="Smiley face"> 
<p class="about"> 
Prevailed sincerity behaviour to so do principle mr. As departure at no propriety zealously my. On dear rent if girl view. First on smart there he sense. Earnestly enjoyment her you resources. Brother chamber ten old against. Mr be cottage so related minuter is. Delicate say and blessing ladyship exertion few margaret. Delight herself welcome against smiling its for. Suspected discovery by he affection household of principle perfectly he. <p> 
</div> 

<div> 
<img class="djimage" src="dj1.png" alt="Smiley face"> 
<p class="about"> 
Prevailed sincerity behaviour to so do principle mr. As departure at no propriety zealously my. On dear rent if girl view. First on smart there he sense. Earnestly enjoyment her you resources. Brother chamber ten old against. Mr be cottage so related minuter is. Delicate say and blessing ladyship exertion few margaret. Delight herself welcome against smiling its for. Suspected discovery by he affection household of principle perfectly he. <p> 
</div> 

私は、社会に出て撮影しましたメディアボタンセクションbeca私はこの時点でそれが適切ではないと思う。

CSSスニペット：

.djimage{ 

    height:400px; 
    position: absolute; 
    margin-left:20%; 
} 
.about { 
    margin-left:50%; 

    text-align:left; 
    float: right; 
    width: 284px; 
z-index: 1; 
position: absolute; 
font-size :14px; 
font-family: Arial; 
} 
h2 { 
    margin-left:50%; 
    position: absolute; 
    text-align:left; 
    float:right; 
} 

Answer 1

あなたのコードを読んだ後、私はあなたが正しくあなたの段落を閉じていないことがわかりました。

最初の段落の後に、</p>ではなく<p>で終了し、2番目の段落でも同様です。段落内の段落を2回初期化していて、タグを閉じていないため、整列が乱れることがあります。それらを修正して、画像が適切に整列するようにしてください。

Answer 2

あなたはクラスの行を試すことができます。

<div class="row"> 
    <h2> DJ Name 1 </h2> 
<img class="djimage" src="dj1.png" alt="Smiley face"> 
<p class="about"> 
Prevailed sincerity behaviour to so do principle mr. As departure at no propriety zealously my. On dear rent if girl view. First on smart there he sense. Earnestly enjoyment her you resources. Brother chamber ten old against. Mr be cottage so related minuter is. Delicate say and blessing ladyship exertion few margaret. Delight herself welcome against smiling its for. Suspected discovery by he affection household of principle perfectly he. 
</p> 

</div> 

またはこのように、クラスclearfixとdivタグを追加します。

<div> 
<img class="djimage" src="dj1.png" alt="Smiley face"> 
<p class="about"> 
Prevailed sincerity behaviour to so do principle mr. As departure at no propriety zealously my. On dear rent if girl view. First on smart there he sense. Earnestly enjoyment her you resources. Brother chamber ten old against. Mr be cottage so related minuter is. Delicate say and blessing ladyship exertion few margaret. Delight herself welcome against smiling its for. Suspected discovery by he affection household of principle perfectly he. 
</p> 
<div class="clearfix"></div> 
</div> 

CSS

.row:after { 
    content: ""; 
    clear: both; 
    display: block; 
} 

.clearfix { 
    clear: both; 
    height: 0; 
    line-height: 1px; 
    font-size: 1px; 
} 

そして、あなたは< Pを交換する必要があります>によって</p >終了タグ位置