什麼是定位元素內的元素

Question

我有一個聊天室，我建立在節點js，HTML和CSS，我將消息附加到一個div和樣式的消息用CSS所以我的問題是什麼定位這些元素的最佳方式就像個人資料圖片，名稱，日期和消息

這裏是我當前的樣式我對這些並不滿意，因爲如果您在開發工具中查看它們，您會看到跨度或不管是更大或比實際更小的元素應該是我覺得

here是鏈接到我的網站，以便您可以查看開發工具

這裏是我曾嘗試我喜歡的外觀，但這個困擾我，使我認爲會有其他圖形錯誤設備

#message-container { 
    word-wrap: break-word; 
    position: relative; 
    padding: 0px; 
    margin: 0px; 
    color: black; 
} 

.chat-room-profilePic img { 
    position: relative; 
    left: 10px; 
    height: 50px; 
    width: 50px; 
    border-radius: 25px; 
    margin-bottom: 0px; 
    padding: 0px; 
    margin: 0px; 
} 

.chat-room-message { 
    color: black; 
    position: relative; 
    left: 52px; 
    top: 10px; 
} 

.chat-room-date { 
    position: relative; 
    font-size: 12px; 
    top: 0px; 
    margin-bottom: 0px; 
    color: cadetblue; 
} 

.message-info { 
    position: relative; 
    top: -32px; 
    left: 20px; 
} 

能有人爲請幫助我，或告訴我什麼我做錯了

Answer 1

爲了記錄在案，你絕對可以做的一切，而不撓框：

HTML

<article class='user'> 
    <figure class='avatar'> 
     <img src='http://placehold.it/400x400' alt='' /> 
    </figure> 
    <div class='info'> 
     <div class='name'>Account name</div> 
     <div class='date'>12/12/2012</div> 
     <div class='time'>4:4500 PM</div> 
     <div class='message'>Hello Mr Account name</div> 
    </div> 
</article> 

風格

responsive-image() 
    img 
     display: block 
     width: 100% 
     height: auto 

.user 
    display: inline-block 
    padding: .5rem 
    .avatar, .info 
     display: inline-block 
     vertical-align: middle 
    .avatar 
     responsive-image() 
     max-width: 50px 
     border-radius: 50% 
     overflow: hidden 
    .info 
     .name, .date, .time 
      display: inline-block 
      vertical-align: middle 

這裏的是既具有CodePen：http://codepen.io/sheriffderek/pen/ryBBdy

我愛柔性盒，但它並不總是最好的每一種情況。

Answer 2

下面是使用Flexbox的一個解決方案。

#message-container { 
 
    max-width: 320px; 
 
    font-family: sans-serif; 
 
} 
 
img { 
 
    width: 50px; 
 
    margin: 0 1em 0 0; 
 
} 
 
.flex { 
 
    display: flex; 
 
} 
 
.column { 
 
    flex-direction: column; 
 
    padding: .35em 0 0; 
 
} 
 
.chat-room-username-server { 
 
    color: #09c; 
 
} 
 
.chat-room-date { 
 
    font-size: .8em; 
 
    color: turquoise; 
 
} 
 
.message-info { 
 
    margin: 0 0 .25em; 
 
} 
 
.chat-room-message { 
 
    line-height: 1.4; 
 
}

<div id="message-container" class="flex parent"> 
 
    <span class="chat-room-profilePic"> 
 
    <img src="http://chat.billischill.ga:8080/profiles/userPictures/SERVER.png"> 
 
    </span> 
 
    <span id="chat-room-message" class="chatroom-message flex column"> 
 
    <span class="message-info"> 
 
     <span class="chat-room-username-server">SERVER:</span> 
 
     <span class="chat-room-date ">2/21/2017, 5:06:28 PM</span> 
 
    </span> 
 
    <span class="chat-room-message ">you have connected to General-Chat lorem ipsum sit dolor you have connected to General-Chat lorem ipsum sit dolor</span> 
 
    </span> 
 
</div>