Was ist der beste Weg, um Elemente innerhalb eines div

Question

Ich habe einen Chatroom Ich baute in Knoten js, HTML und CSS und ich bin anhängen die Nachrichten an ein div und styled die Nachrichten mit CSS so meine Frage ist was ist der beste Weg, diese Elemente wie das Profilbild, den Namen, das Datum und die Nachricht zu positionieren

Hier ist mein aktueller Stil Ich fühle mich nicht gut über diese, denn wenn Sie sie in Dev-Tools betrachten, werden Sie sehen, dass die Spannweite oder was auch immer ist viel größer oder kleiner als das eigentliche Element soll ich denke

sein

here ist der Link zu meiner Seite, damit Sie die Entwickler-Tools

sehen können hier

ist, was ich versucht habe ich den Blick mögen, aber das stört mich und führt mich, dass es zu denken, auf andere grafische Bugs sein

Geräte

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

kann mir somone bitte helfen oder mir sagen, was ich

Answer 1

Für die Aufzeichnung können Sie auf jeden Fall alles ohne Flex-Box tun:

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> 

Arten

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 

Hier ist ein CodePen mit beiden: http://codepen.io/sheriffderek/pen/ryBBdy

Ich liebe flex-Box, aber es ist nicht immer die beste für jede Situation.

Answer 2

Hier ist eine Lösung mit Flexbox falsch mache.

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