Question

我有一个我在节点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;
}

可以somone请帮助我或告诉我我做错了什么

Answer 1

这是使用flexbox的解决方案。

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

Answer 2

为了记录，你绝对可以在没有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

我喜欢弹性盒子，但它并不总是最适合各种情况。

将元素放在div中的最佳方法是什么？

2 个答案: