創建div元素的列表：位置不正常工作

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>

試試這個

Answer 2

這個的重要部分是在.hour_me類上設置clear: both以在圖像下移動時間。從那裏，您可以修改margin以根據需要對齊其餘元素。試試這個：

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

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

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>