Question

我想要一个元素向左浮动，然后是一个向右浮动的元素，两个都在不同的行上。它应该是一个聊天客户端，文本显示在消息div的底部。由于某种原因，发送和接收的消息最终都在同一行。

这是html。

<div class="messages">
  <div class="message-list">
    <div class="message-row">
      <span class="sent-message">Hello world</span>
    </div>
    <div class="message-row">
      <span class="received-message">TESTING</span>
    </div>
  </div>
</div>

和css

.messages {
  height: 500px;
  position: relative;
}

.message-list {
  position: absolute;
  bottom: 0;
  width: 100%;
}

.sent-message{
  float: right;
}

.received-message {
  float: left;
}

和jsfiddle。 https://jsfiddle.net/5pdad3tx/

Answer 1

将此添加到您的css。！

.message-row{
    clear:both;
}

工作FIDDLE

Answer 2

在第一个消息行div之后添加function group($total, $groups) { // Calculate participants per group and remainder $group = floor($total / $groups); $remainder = $total % $groups; // Prepare groupings and append remaining participant to first group $groupings = array_fill(0, $groups, $group); $groupings[0] += $remainder; return $groupings; }！

<br />

向右漂浮并向左漂浮在不同的线

2 个答案: