Question

这是我在Stack溢出时的第一个问题，我希望我已经做好了一切。

我试图将某些div设置为与Skype聊天窗口相同的方式。有多种方法可以对齐左边的三个div，左边，右边或两个div，但我还没有找到一种方法将两个div对齐，并排放置在右边。特别是如果其中一个没有固定的尺寸。

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

我也承认现在代码非常混乱，因为我试图把它弄好，所以我真的很感激这里可以帮助我走上正确的道路。

这个聊天窗口是我想要实现的一个例子： Skype chat window

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

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

Answer 1

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

回顾一下： 将您的聊天窗口想象为表格网格：

你看到ROWS和每行三个单元格现在，冷却，为.message DIV（单元格）的<p>着色，为传入的消息添加margin-left，为另一个添加margin-right。

如何将div对齐为skype聊天窗口？

1 个答案: