Img는 Div에 포함되어 있지 않습니다.

Question

저는 본질적으로 제목, 이미지, 설명 및 일부 소셜 미디어 버튼이 포함 된 div를 만들려고합니다. 웹 사이트에서 같은 div의 여러 인스턴스를 원합니다. 팀 페이지를 만나는 것과 같은 종류의 생성. 그러나, 나는 모든 것을 적절하게 배치하지는 않습니다. 모질라 파이어 폭스 에디터를 사용하면 이미지가 div에 들어 있지 않다는 것을 알게됩니다. 이것의 원인이 무엇일까요? 나는 그 (것)들 사이에서 공간을 가진 다른 사람을 차례 차례로 줄기 바란다. 웹 페이지의

현재보기 :

는

는 는 사업부가 웹 페이지에 포함되지

:

는

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>으로 끝나고 두 번째 단락도 동일하게 끝났습니다. 단락 안의 단락을 두 번 초기화하고 태그를 닫지 않기 때문에 정렬이 엉망이 될 수 있습니다. 이미지를 고치면 이미지가 올바르게 정렬됩니다.

<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 태그를 추가 :

Answer 2

당신은 클래스 행을 시도 할 수 있습니다

<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; 
} 

그리고 당신은 < 페이지를 교체해야 > by </p > 닫기 태그 위치