Question

我在html中使用div时遇到了一些麻烦。我有两个用户的聊天室并希望以类似WhatsApp的方式显示消息。我将div的文本放置在浮动属性的右侧或左侧。

但是当我在编写较大的文本时，其后的下一条消息将移到大消息的旁边。您可以在这里看到： An Image of the Chat-Problem

这是我的PHP代码：

form: {... a bunch of typescript unions} = new Proxy(this.$store.getters['user'], this.recursiveProxy)

还有我的CSS代码：

final BehaviorSubject<Foo> _foo;
Stream<Foo> get foo => foo;

我真的希望有人能告诉我如何使div相互之间。

Answer 1

您将必须使用clear property来实现。

clear属性指定哪些元素可以漂浮在已清除元素的旁边和哪一侧。

.div1 {
  float: left;
  width: 100px;
  height: 50px;
  margin: 10px;
  border: 3px solid #73AD21;
}

.div2 {
  border: 1px solid red;
}

.div3 {
  float: left;
  width: 100px;
  height: 50px;
  margin: 10px;
  border: 3px solid #73AD21;
}

.div4 {
  border: 1px solid red;
  clear: left;
}

<h2>Without clear</h2>
<div class="div1">div1</div>
<div class="div2">div2 - Notice that div2 is after div1 in the HTML code. However, since div1 floats to the left, the text in div2 flows around div1.</div>
<br><br>

<h2>With clear</h2>
<div class="div3">div3</div>
<div class="div4">div4 - Here, clear: left; moves div4 down below the floating div3. The value "left" clears elements floated to the left. You can also clear "right" and "both".</div>

如何将浮动div的一个放在另一个之上？

1 个答案: