我有一个用 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;
}
有人可以帮助我或告诉我我做错了什么
最佳答案
为了记录,你绝对可以在没有 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/