如何阻止消息框

时间：2016-06-26 18:25:04

标签： html css

我们开发聊天应用程序。在输入和输出短信即将到来。但是输入和输出并排但是需要逐个 .like if输入是单个之后然后该行总块然后输出将变短或长文本它应该只是文本行但我无法得到它和消息框角落变得不同任何一个请帮助我

这是我们正面临的请找到屏幕截图

enter image description here

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

enter image description here 

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

2 个答案:

答案 0 :(得分：1)

您只需将message divs打包到一个div的新width:98%中。 所以新消息出现在第一个消息之后。

<强>感谢

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

一个简单的解决方案是在clear: both;和clear: right;的CSS规则中设置.userTextDiv而不是.userTextDivOp。

要解决角落问题，只需使用.userTextDiv:before和after的CSS来替换.userTextDivOp:before和after的CSS并替换right left规则。

希望它有所帮助。

 .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: both;
}

.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;
    clear: both;
}

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


.userTextDivOp::after {
	content: '';
	position: absolute;
	visibility: visible;
	top: 0px;
	left: -6px;
	border: 9px solid transparent;
	border-top: 8px 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>

相关问题
最新问题