html - 如何屏蔽消息框

Question

我们开发聊天应用。在那个输入和输出文本消息即将到来。但是输入和输出是并排出现但我需要一个接一个。就像如果输入是单一的然后那行总 block 然后输出将是短文本或长文本它应该只是文本行但我无法得到它并且消息框 Angular 落变得不同任何人请帮帮我

这是我们面对的请看截图

我们需要这样的 Angular 落，但 Angular 落不一样，我需要输入用户消息，它是如何出现的，我们需要这样的客户消息框 Angular 落

.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>

Answer 1

您只需将 message div 包装在新的 div 中，宽度为 width:98%。以便新消息出现在第一条消息之后。

谢谢

.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>