jquery - 创建 div 元素列表 : position not working fine

Question

我在创建 <div> 列表时遇到问题元素。问题出在定位元素上。

实际结果:

预期结果:

代码如下:

.im_view_me {
  background-color: white;
  margin-top: -10px;
}
.hour_me {
  float: left;
  color: black;
  font-size: 9px;
  margin-left: 3px;
  margin-top: 20px;
}
.text_from_im {
  color: #964FDB;
  font-weight: 600;
  margin-left: 50px;
  font-size: 11px;
  padding-top: 5px;
}
.text_im {
  color: black;
  font-size: 11px;
  margin-left: 50px;
  width: 200px;
}
.img_me_im {
  width: 35px;
  height: 35px;
  float: left;
  position: relative;
  margin: 5px;
}

<div class="im_view_me">
  <img src="../Common Files/img/img_example.jpg" class="img_me_im" />
  <p class="hour_me">15:21</p>
  <p class="text_from_im">Me</p>
  <p class="text_im">idizduih zhdedh zihed uizh ifhierh fieirfhi</p>
</div>
<div class="im_view_me">
  <img src="../Common Files/img/img_example.jpg" class="img_me_im" />
  <p class="hour_me">15:21</p>
  <p class="text_from_im">Me</p>
  <p class="text_im">idizduih zhdedh zihed uizh ifhierh fieirfhi</p>
</div>
<div class="im_view_me">
  <img src="../Common Files/img/img_example.jpg" class="img_me_im" />
  <p class="hour_me">15:21</p>
  <p class="text_from_im">Me</p>
  <p class="text_im">idizduih zhdedh zihed uizh ifhierh fieirfhi</p>
</div>

Answer 1

.im_view_me {
background-color: white;
position: relative;
float: left;
width: 100%;
}
.hour_me {
color: black;
font-size: 9px;
position: absolute;
left: 2%;
top: 58%;
}
.text_from_im {
  color: #964FDB;
  font-weight: 600;
  margin-left: 50px;
  font-size: 11px;
}
.text_im {
  color: black;
  font-size: 11px;
  margin-left: 50px;
  width: 200px;
}
.img_me_im {
width: 35px;
height: 35px;
float: left;
position: relative;
margin: 5px 5px 20px 5px;
border: 2px solid #ccc;
}

<div class="im_view_me">
  <img src="../Common Files/img/img_example.jpg" class="img_me_im" />
  <p class="hour_me">15:21</p>
  <p class="text_from_im">Me</p>
  <p class="text_im">idizduih zhdedh zihed uizh ifhierh fieirfhi</p>
</div>
<div class="im_view_me">
  <img src="../Common Files/img/img_example.jpg" class="img_me_im" />
  <p class="hour_me">15:21</p>
  <p class="text_from_im">Me</p>
  <p class="text_im">idizduih zhdedh zihed uizh ifhierh fieirfhi</p>
</div>
<div class="im_view_me">
  <img src="../Common Files/img/img_example.jpg" class="img_me_im" />
  <p class="hour_me">15:21</p>
  <p class="text_from_im">Me</p>
  <p class="text_im">idizduih zhdedh zihed uizh ifhierh fieirfhi</p>
</div>

试试这个