我有一个用 node js、HTML 和 CSS 构建的聊天室,我将消息附加到 div 并使用 css 设置消息样式,所以我的问题是定位这些元素(如个人资料图片、名称)的最佳方法是什么,日期和消息

这是我目前的风格,我对这些感觉不太好,因为如果你在开发工具中查看它们,你会发现跨度或任何比实际元素应该更大或更小的我认为

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

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

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

有人可以帮助我或告诉我我做错了什么

最佳答案

为了记录,你绝对可以在没有 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,但它并不总是适合每种情况。

关于javascript - 在 div 中定位元素的最佳方法是什么,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/42380843/

10-09 15:26
查看更多