Question

我正在尝试制作一个小型聊天应用程序（如在facebook中）。现在的问题是，我已经以某种方式使它工作，但如果在之前的聊天消息中有超过2行，则下一个消息框不会附加到我希望它的位置。它们重叠。现在我想在每个消息div之后附加一个或多个br标签来解决这个问题，但事实并非如此。

如何在一个较大的div内部div之后动态附加div，确保其中的div框不重叠且至少相距20px？

Answer 1

以下是否解决了您的问题：

＆＃13;

$(document).ready(function() {
  var smallerDiv = "<div class='container'><div class='floatLeft'>Some message</div></div>";
  var smallerDivRight = "<div class='container'><div class='floatRight'>Some message</div></div>";
  var alignRight = 0;
  $('#addMore').click(function() {
    var elem = $('#largerDiv');
    if(alignRight == 0) {
      elem.append(smallerDiv);
    } else {
      elem.append(smallerDivRight);
    }
    elem.scrollTop(elem[0].scrollHeight);
    alignRight = (alignRight + 1)%2;
  });
});

＆＃13;

.container {
  width: 100%;
  display: inline-block;
  padding: 4px;
  border: 1px solid green;
}

.floatRight {
  float: right;
}

.floatLeft {
  float: left;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
  <div id="largerDiv" class="largerDiv">
  </div>
  <input type="button" id="addMore" value="Add more">
</body>
</html>

＆＃13;

将包含文本的div添加到更大的div中

1 个答案: