html - 如何阻止消息框

我们开发聊天应用程序。在那个输入和输出的文本信息是来了。但是输入和输出是并排来的，但是我需要一个接一个。就像如果输入是单一的，然后那一行的总块，然后输出将是短或长的文本，它应该只是来的文本行，但我不能得到那和消息框角落来了不同的任何一个请帮助我
这是我们面对的，请找到屏幕截图

我们需要这样和角落是不一样的我需要输入用户信息它是怎么来的我们需要这样的客户信息框角落

.userTextDiv {
	position: relative;
	background: white;
	padding-bottom: 7px;
	padding-left: 7px;
	padding-right: 7px;
	border-radius: 6px;
	border: 3px solid #999;
	float: right;
	margin-bottom: 7px;
	font-size: 12px;
	text-align: right;
	padding-top: 5px;
	margin-right: 4px;
	margin-left: 4px;
	clear: right;
}

.userTextDiv::before {
	content: '';
	position: absolute;
	visibility: visible;
	top: -3px;
	right: -11px;
	border: 9px solid transparent;
	border-top: 11px solid #999;
}

.userTextDiv::after {
	content: '';
	position: absolute;
	visibility: visible;
	top: 0px;
	right: -6px;
	border: 9px solid transparent;
	border-top: 8px solid white;
	clear: both;
}

.userTextDiv img {
	display: block;
	height: auto;
	max-width: 100%;
}

.userTextDiv .username {
	position: relative;
	display: block;
	font-weight: bold;
	font-size: 12px;
	color: #8e0035;
}

.userTextDiv .message {
	word-break: break-all;
	font-size: 12px;
}

.userTextDivOp {
	text-align: left;
	float: left;
	clear: left;
	position: relative;
	background: white;
	padding-top: 5px;
	padding-bottom: 7px;
	padding-left: 7px;
	padding-right: 7px;
	border-radius: 6px;
	border: 3px solid #999;
	font-size: 12px;
	margin-bottom: 7px;
	margin-right: 4px;
	margin-left: 11px;
}

.userTextDivOp::before {
	left: -18px !important;
	right: 0px !important;
	content: '';
	position: absolute;
	visibility: visible;
	top: -3px;
	border: 14px solid transparent;
	border-top: 6px solid #999;
}

.userTextDivOp::after {
	left: -6px;
	right: 0px !important;
	content: '';
	position: absolute;
	visibility: visible;
	top: 0px;
	border: 9px solid transparent;
	border-top: 4px solid white;
	clear: both;
}

.userTextDivOp .message {
	word-break: break-all;
	font-size: 12px;
}

.userTextDivOp .username {
	position: relative;
	display: block;
	font-weight: bold;
	font-size: 12px;
	color: #8e0035;
}

<div class="userTextDiv">
  <div class="username">user</div>
  <span  class="message">helphelphelphelphelphelphelphehelphelphelphelphelphelplphelphelphelphelphelphelphelphelphelphelphelphelp</span>
</div>

<div class="userTextDivOp">
  <div class="username">customer</div>
  <span class="message">click on oky button</span>
</div>

<div class="userTextDiv">
  <div class="username">user</div>
  <span  class="message">click on oky button</span>
</div>

<div class="userTextDivOp">
  <div class="username">customer</div>
  <span class="message">helphelphelphelphelphelphelphehelphelphelphelphelphelplphelphelphelphelphelphelphelphelphelphelphelphelp</span>
</div>

最佳答案

你只需要用一个新的message divs来包装div。
所以新的信息在第一条之后。
谢谢

.message-block{
  width:98%;
  height:auto;
  overflow:hidden;
  position:relative;
  padding:0px 10px;
}

.userTextDiv {
	position: relative;
	background: white;
	padding-bottom: 7px;
	padding-left: 7px;
	padding-right: 7px;
	border-radius: 6px;
	border: 3px solid #999;
  border-top:2px solid #999;
	float: right;
	margin-bottom: 7px;
	font-size: 12px;
	text-align: right;
	padding-top: 5px;
	margin-right: 4px;
	margin-left: 4px;
	clear: right;
}

.userTextDiv::before {
	content: '';
	position: absolute;
	visibility: visible;
	top: -2px;
	right: -10px;
	border: 9px solid transparent;
	border-top: 11px solid #999;
}

.userTextDiv::after {
	content: '';
	position: absolute;
	visibility: visible;
	top: 0.01em;
	right: -6px;
	border: 9px solid transparent;
	border-top: 10px solid white;
	clear: both;
}

.userTextDiv img {
	display: block;
	height: auto;
	max-width: 100%;
}

.userTextDiv .username {
	position: relative;
	display: block;
	font-weight: bold;
	font-size: 12px;
	color: #8e0035;
}

.userTextDiv .message {
	word-break: break-all;
	font-size: 12px;
}

.userTextDivOp {
	text-align: left;
	float: left;
	clear: left;
	position: relative;
	background: white;
	padding-top: 5px;
	padding-bottom: 7px;
	padding-left: 7px;
	padding-right: 7px;
	border-radius: 6px;
	border: 3px solid #999;
	font-size: 12px;
	margin-bottom: 7px;
	margin-right: 4px;
	margin-left: 11px;
}

.userTextDivOp::before {
left: -14px !important;
right: 0px !important;
content: '';
position: absolute;
visibility: visible;
top: -3px;
border: 11px solid transparent;
border-top: 10px solid #999;
}

.userTextDivOp::after {
left: -9px;
right: 0px !important;
content: '';
position: absolute;
visibility: visible;
top: -0.09em;
border: 10px solid transparent;
border-top: 9px solid white;
clear: both;
}

.userTextDivOp .message {
	word-break: break-all;
	font-size: 12px;
}

.userTextDivOp .username {
	position: relative;
	display: block;
	font-weight: bold;
	font-size: 12px;
	color: #8e0035;
}

<div class="message-block">
<div class="userTextDiv">
  <div class="username">user</div>
  <span  class="message">helphelphelphelphelphelphelphehelphelphelphelphelphelplphelphelphelphelphelphelphelphelphelphelphelphelp</span>
</div>
</div>

<div class="message-block">
<div class="userTextDivOp">
  <div class="username">customer</div>
  <span class="message">click on oky button</span>
</div>
</div>

<div class="message-block">
<div class="userTextDiv">
  <div class="username">user</div>
  <span  class="message">click on oky button</span>
</div>
</div>

<div class="message-block">
<div class="userTextDivOp">
  <div class="username">customer</div>
  <span class="message">helphelphelphelphelphelphelphehelphelphelphelphelphelplphelphelphelphelphelphelphelphelphelphelphelphelp</span>
</div>
  </div>

关于html - 如何阻止消息框，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38041724/