如何使div看起来像Skype聊天窗口？

Sleepy Lion 发表于 Dev

困狮子

这是我在Stack Overflow上遇到的第一个问题，我希望我做对了所有事情。

我试图将某些div定位为与Skype聊天窗口相同。有多种方法可以将三个div（左，中，右或左对齐两个div）对齐，但是我还没有找到一种将两个div并排对齐的方法。特别是如果其中一个没有固定大小，则不会。

我已经能够定位传入用户的个人资料图片，聊天气泡和时间戳，但还没有找到定位传出dito的方法。

我还承认，由于我为使代码正确所做的所有尝试，该代码现在非常混乱，因此，我非常感谢这里的一些帮助，可以使我走上正确的道路。

此聊天窗口是我要实现的示例：Skype聊天窗口

这是html：

收到的消息：

<div class="skype-parent">

<img class="skype-in-avatar" src="users_avatar.jpg alt="" />

<div class="skype-in-message">
This is the incoming text.
</div>

<div class="skype-timestamp">
08:42
</div>
</div>

外发邮件：

<div class="skype-parent">

<div class="skype-out-message">
This is the outgoing text.
</div>

<div class="skype-timestamp">
08:56</p>
</div>
</div>

父div的CSS（有效！）：

div.skype-parent {
    text-align:         left;
    margin-top:         0.2em;
    margin-bottom:      0.2em;
    clear:              both; }

时间戳div的CSS（有效！）：

div.skype-timestamp {
    text-align:         center;
    margin-top:         0.5em;
    float:              right; }

CSS的传入消息（工作！）：

img.skype-in-avatar {
    float:              left;
    width:              30px; 
    height:             30px;
    margin-left:        0.5em;
    margin-right:       0.5em;
    border-radius:      1.5em;      }


div.skype-in-message {
    max-width:          75%;
    background-color:   #c7edfc;
    padding:            0.5em;
    border-radius:      10px;
    display:            inline-block;
    vertical-align:     bottom; }

传出消息的CSS（无效）：

div.skype-out-message {
    max-width:          75%;
    background-color:   #e5f7fd;
    padding:            0.5em;
    border-radius:      10px; }

因此，在这里我需要帮助的是此传出消息的定位代码。如示例所示，聊天气泡位于时间戳的右侧，但仍位于时间戳的左侧。

罗科·C·布尔扬

.skype-parent{
  font:         14px/1.23 sans-serif;
  display:      table;
  table-layout: fixed;
  width:        100%;
  border-collapse: separate;
  border-spacing: 0 10px;
}

/* ROWS */

.message{
  display: table-row;
}

/* ALL CELLS */

.message > *{
  position:   relative;
  box-sizing: border-box;
  display:    table-cell;
}
.message img{
  border-radius:  50%;
  vertical-align: middle;
}

/* IMAGE CELL & TIME CELL */

.message > div:nth-child(1),
.message > div:nth-child(3){
  width:      52px;
  text-align: center;
  font-size:  12px;
  color:      #AFCBD8;
}

/* MESSAGE CELLS */

.message p {
  color:      #6E767C;
  border-radius:4px;
  padding: 12px 14px;
  margin: 0 36px 0 0;
  background: #c7edfc;
}
.message.user p {
  margin: 0 0 0 36px;
  background: #e5f7fd;
}

/* ARROWS */

.message > div:nth-child(2):after {
  position:   absolute;
  content:    "";
  width:      8px;
  height:     8px;
  background: #c7edfc;
  left:       0;
  top:        18px;
  margin-left: -4px;
  transform:  rotate(45deg); -webkit-transform: rotate(45deg);
}

.message.user > div:nth-child(2):after {
  left:       100%;
  background: #e5f7fd;
}

<div class="skype-parent">

  <div class="message">
    <div><img src="https://i.stack.imgur.com/1ZIkv.jpg?s=32&g=1"></div>
    <div><p>It's easy!</p></div>
    <div>08:40</div>
  </div>

  <div class="message user">
    <div></div>
    <div><p>Really?</p></div>
    <div>08:42</div>
  </div>

  <div class="message">
    <div><img src="https://i.stack.imgur.com/1ZIkv.jpg?s=32&g=1"></div>
    <div><p>Well...</p></div>
    <div>08:42</div>
  </div>

</div>