创建div元素列表：位置不正常

Question

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

实际结果：

预期结果：

以下是代码：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

这一点的重要部分是在clear: both类上设置.hour_me以将时间移到图像下方。从那里，您可以修改margin以根据需要对齐剩余的元素。试试这个：

＆＃13;

＆＃13;

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

＆＃13;

<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 idizduih zhdedh zihed uizh ifhierh fieirfhi 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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

试试这个

Answer 3

我不是浮动元素的忠实粉丝，因为我发现它们难以使用。所以相反，我更喜欢使用定位（如下所示）。

这允许（意见）轻松地相对于父母定位所有元素，并且还允许我根据父母快速识别应该的项目。

.wrap div {
  display: inline-block;
}
.wrap img {
  height: 40px;
  width: 40px;
  padding: 10px;
}
.wrap {
  height: 80px;
  width: 350px;
  border: 5px solid black;
  position: relative;
}
.wrap .time {
  position: absolute;
  bottom: 5px;
  left: 10px;
}
.wrap .Title {
  position: absolute;
  left: 70px;
  top: 10px;
  color: #964FDB;
}
.wrap .para {
  position: absolute;
  overflow: auto;
  left: 70px;
  top: 25px;
  width: 80%;
  height: 75%;
}

<div class="wrap">
  <img src="http://placekitten.com/g/300/300" />
  <div class="time">11:00</div>
  <div class="Title">Me</div>
  <div class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
</div>
<div class="wrap">
  <img src="http://placekitten.com/g/200/150" />
  <div class="time">11:00</div>
  <div class="Title">Me</div>
  <div class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
</div>
<div class="wrap">
  <img src="http://placekitten.com/g/300/200" />
  <div class="time">11:00</div>
  <div class="Title">Me</div>
  <div class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
</div>