Question

我正在尝试创建一个消息传递页面，但是带有已发送消息的div会堆积起来，当每个“行”中只有两个时，它就会有两个。

.message类的div应该全部向右浮动，每行只有一个div。

我在项目中使用jQuery。

#mydiv{
  width: 80%; 
  margin: auto;
  min-height: 100px;
  max-height: 80%;
  overflow-y: auto;
  border: 3px solid red;
}

.message{
  float: right;
  width: 40%;
  border: 2px solid aqua;
}

#messagebox{
  position: absolute;
  right: 11%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<div id="mydiv">

</div>
<p/>
<textarea id="messagebox" placeholder="Press enter to send message">
</textarea>
<script>
$('#messagebox').keypress(function(e){
	if(e.which==13){
  	e.preventDefault();
    send($(this).val());
    $(this).val("");
  }
});
function send(msg){
 var msgDiv = "<div class='message'>"+msg+"</div>"
	$('#mydiv').append(msgDiv);
}
</script>
</body>
</html>

Answer 1

您将需要使用clear: both来防止.message div两侧的任何浮动元素（或者您可以只使用clear: left来防止div左侧的任何浮动元素） .message格）。参见documentation。

#mydiv{
  width: 80%; 
  margin: auto;
  min-height: 100px;
  max-height: 80%;
  overflow-y: auto;
  border: 3px solid red;
}

.message{
  float: right;
  width: 40%;
  clear: both;/*prevents floating elements on both sides*/
  border: 2px solid aqua;
}

#messagebox{
  position: absolute;
  right: 11%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<div id="mydiv">

</div>
<p/>
<textarea id="messagebox" placeholder="Press enter to send message">
</textarea>
<script>
$('#messagebox').keypress(function(e){
  if(e.which==13){
    e.preventDefault();
    send($(this).val());
    $(this).val("");
  }
});
function send(msg){
 var msgDiv = "<div class='message'>"+msg+"</div>"
 $('#mydiv').append(msgDiv);
}
</script>
</body>
</html>

Divs不会向右对齐

1 个答案: