javascript - 在 div 中定位元素的最佳方法是什么

Question

我有一个用 node 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

郑重声明，没有 flex-box 你绝对可以做任何事情:

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

我喜欢 flex-box，但它并不总是适合所有情况。