在div内放置元素的最佳方法是什么

尼克·亨德里克斯

我有一个内置于节点js，HTML和CSS中的聊天室，我将消息附加到div并使用CSS设置消息样式，所以我的问题是放置这些元素（例如个人资料图片，姓名，日期和消息

这是我目前的风格，我对此不太满意，因为如果您在开发工具中查看它们，将会发现span或比实际元素大或小的东西应该是我认为的

这是我网站的链接，因此您可以查看开发工具

这是我尝试过的外观，但是这让我感到困扰，并导致我认为其他设备上会出现图形错误

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

可以请你帮我还是告诉我我做错了什么

警长

作为记录，您绝对可以在没有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，但这并不总是适用于所有情况。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。