我不包含在Div

Question

我基本上试图创建一个包含标题，图像，描述和一些社交媒体按钮的div。我想在网站上使用相同div的多个实例。创建类似于满足团队页面。但是，我并没有把所有事情都搞定。使用Mozilla Firefox编辑器，我意识到图像不包含在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>

我已经取消了社交媒体按钮部分，因为我认为此时并不重要。

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>结束，第二段相同。这可能会使对齐变得混乱，因为您正在初始化段落内的段落，两次，甚至不关闭标记。尝试修复它们，图像可能会正确对齐。

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

你需要替换＆lt; p＆gt;由＆lt; / p＆gt;在关键标记位置