需要CSS帮助。真的错了

时间：2015-07-14 10:41:54

标签： html css

第三条聊天消息应与第一条聊天消息相同。它甚至是错误的方向和颜色。 This is my problem. JSFIDDLE

CSS

............................................... .................................................. .................................................. ....... 

.chat {
    max-height: 570px; 
    overflow: auto; 
    margin: 0 0 30px 0; 
    border-top: 1px solid #ddd; 
    border-bottom: 1px solid #ddd; 
    background-color: #fff;
}

.chat .message { 
    float: left; 
    clear: both; 
    max-width: 80%; 
    padding: 0 0 20px 0; 
    position: relative; 
}

.chat .message:first-child { 
    padding-top: 20px; 
}

.chat .message.in { 
    float: left;
}

.chat .message.out { 
    float: right;
}

.chat .message img.avatar {
    height: 45px;
    width: 45px;
}

.chat .message.in img.avatar {
    float: left;
    margin-right: 10px;
    margin-top: 0px;
}

.chat .message.out img.avatar {
    float: right;
    margin-left: 10px;
    margin-top: 0px;
}

.chat .message .content { 
    padding: 12px 14px;
    position: relative;
}

.chat .message.in .content { 
    color: #FFFFFF;
    background-color: #65CEA7;
    margin-left: 58px; 

}
.chat .message.out .content { 
    color: #333; 
    background-color: #EFF0F4;
    margin-right: 58px; 
    border: 1px solid #e5e5e5; 
}

.chat .message.in .content:after { 
    border-top: 6px solid rgba(0, 0, 0, 0); 
    border-right: 6px solid #65CEA7; 
    border-bottom: 6px solid rgba(0, 0, 0, 0); 
    left: -6px; top: 13px; 
    position: absolute; 
    margin-left: 0; 
    content: ''; 
}

.chat .message.out .content:before { 
    position: absolute; 
    top: 12px; 
    right: 0; 
    display: inline-block; 
    border-top: 7px solid rgba(0, 0, 0, 0);
    border-left: 7px solid #e5e5e5; 
    border-bottom: 7px solid rgba(0, 0, 0, 0); 
    border-left-color: rgba(0, 0, 0, 0.2); 
    content: ''; 
    margin-right: -7px; 
}

.chat .message.out .content:after { 
    position: absolute; 
    top: 13px; 
    right: 1px; 
    left: auto; 
    display: inline-block; 
    border-top: 6px solid rgba(0, 0, 0, 0); 
    border-left: 6px solid #fff; 
    border-bottom: 6px solid rgba(0, 0, 0, 0);
    border-right: 0; 
    content: ''; 
    margin-right: -7px; 
}

.chat .message .content .name {
    font-size: 13px;
    font-weight: bold;
}

.chat .message.in .content a.name{
    color: #fff;
}

.chat .message.out .content a.name {
    color: #333;
}

.chat .message .content .date {
    font-size: 13px;
    font-weight: 400;
}

.chat .message.in .content .date {
    color: #fff;
    opacity: 0.6;
}

.chat .message.out .content .date {
    color: #000000;
    opacity: 0.6;
}

.chat .message .content .body { 
    padding-left: 1px;
}

.chat .message .content, 
.chat .message img.avatar {
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;

}

HTML 

<div class="chat">
        <div class="message in">
            <img src="http://img2.wikia.nocookie.net/__cb20130220074109/halo/images/8/8d/USER_Sgt_D_Grif_avatar.png" alt="" class="avatar">
            <div class="content">
                <a href="javascript:void(0);" class="name">Margaret J. Collins</a>
                <span class="date">at Mar 12, 2014 6:13</span>
                <div class="body">
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.                       
                </div>
            </div> 
        </div>
        <div class="message out">
            <img src="http://img2.wikia.nocookie.net/__cb20130220074109/halo/images/8/8d/USER_Sgt_D_Grif_avatar.png" alt="" class="avatar">
                <div class="content">
                <a href="javascript:void(0);" class="name">Joseph R. Colston</a>
                <span class="date">at Mar 12, 2014 6:13</span>
                <div class="body">
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.        
                </div>
            <div>
        </div>
        <div class="message in">
            <img src="http://img2.wikia.nocookie.net/__cb20130220074109/halo/images/8/8d/USER_Sgt_D_Grif_avatar.png" alt="" class="avatar">
            <div class="content">
                <a href="javascript:void(0);" class="name">Margaret J. Collins</a>
                <span class="date">at Mar 12, 2014 6:13</span>
                <div class="body">
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.                       
                </div>
            </div> 
        </div>
     </div>

2 个答案:

答案 0 :(得分：1)

你把答案放在div中的消息中。所以这是一个HTML标记问题。

＆＃13;
＆＃13; 
.chat {
  max-height: 570px;
  overflow: auto;
  margin: 0 0 30px 0;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  background-color: #fff;
}
.chat .message {
  float: left;
  max-width: 80%;
  padding: 0 0 20px 0;
  position: relative;
}
.chat .message:first-child {
  padding-top: 20px;
}
.chat .message.in {
  float: left;
}
.chat .message.out {
  float: right;
}
.chat .message img.avatar {
  height: 45px;
  width: 45px;
}
.chat .message.in img.avatar {
  float: left;
  margin-right: 10px;
  margin-top: 0px;
}
.chat .message.out img.avatar {
  float: right;
  margin-left: 10px;
  margin-top: 0px;
}
.chat .message .content {
  padding: 12px 14px;
  position: relative;
}
.chat .message.in .content {
  color: #FFFFFF;
  background-color: #65CEA7;
  margin-left: 58px;
}
.chat .message.out .content {
  color: #333;
  background-color: #EFF0F4;
  margin-right: 58px;
  border: 1px solid #e5e5e5;
}
.chat .message.in .content:after {
  border-top: 6px solid rgba(0, 0, 0, 0);
  border-right: 6px solid #65CEA7;
  border-bottom: 6px solid rgba(0, 0, 0, 0);
  left: -6px;
  top: 13px;
  position: absolute;
  margin-left: 0;
  content: '';
}
.chat .message.out .content:before {
  position: absolute;
  top: 12px;
  right: 0;
  display: inline-block;
  border-top: 7px solid rgba(0, 0, 0, 0);
  border-left: 7px solid #e5e5e5;
  border-bottom: 7px solid rgba(0, 0, 0, 0);
  border-left-color: rgba(0, 0, 0, 0.2);
  content: '';
  margin-right: -7px;
}
.chat .message.out .content:after {
  position: absolute;
  top: 13px;
  right: 1px;
  left: auto;
  display: inline-block;
  border-top: 6px solid rgba(0, 0, 0, 0);
  border-left: 6px solid #fff;
  border-bottom: 6px solid rgba(0, 0, 0, 0);
  border-right: 0;
  content: '';
  margin-right: -7px;
}
.chat .message .content .name {
  font-size: 13px;
  font-weight: bold;
}
.chat .message.in .content a.name {
  color: #fff;
}
.chat .message.out .content a.name {
  color: #333;
}
.chat .message .content .date {
  font-size: 13px;
  font-weight: 400;
}
.chat .message.in .content .date {
  color: #fff;
  opacity: 0.6;
}
.chat .message.out .content .date {
  color: #000000;
  opacity: 0.6;
}
.chat .message .content .body {
  padding-left: 1px;
}
.chat .message .content,
.chat .message img.avatar {
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
}
＆＃13; 
<div class="chat">
  <div class="message in">
    <img src="http://img2.wikia.nocookie.net/__cb20130220074109/halo/images/8/8d/USER_Sgt_D_Grif_avatar.png" alt="" class="avatar">
    <div class="content">	<a href="javascript:void(0);" class="name">Margaret J. Collins</a>
      <span class="date">at Mar 12, 2014 6:13</span>

      <div class="body">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
    </div>
  </div>
  <div class="message out">
    <img src="http://img2.wikia.nocookie.net/__cb20130220074109/halo/images/8/8d/USER_Sgt_D_Grif_avatar.png" alt="" class="avatar">
    <div class="content">	<a href="javascript:void(0);" class="name">Joseph R. Colston</a>
      <span class="date">at Mar 12, 2014 6:13</span>

      <div class="body">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
    </div>

  </div>
  <div class="message in">
    <img src="http://img2.wikia.nocookie.net/__cb20130220074109/halo/images/8/8d/USER_Sgt_D_Grif_avatar.png" alt="" class="avatar">
    <div class="content">	<a href="javascript:void(0);" class="name">Margaret J. Collins</a>
      <span class="date">at Mar 12, 2014 6:13</span>

      <div class="body">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
    </div>
  </div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

这是你的预期产量吗？的 demo 从"message in" div

中提取"message out" 
<div class="chat">
    <div class="message in">
        <img src="http://img2.wikia.nocookie.net/__cb20130220074109/halo/images/8/8d/USER_Sgt_D_Grif_avatar.png" alt="" class="avatar">
        <div class="content">   <a href="javascript:void(0);" class="name">Margaret J. Collins</a>
 <span class="date">at Mar 12, 2014 6:13</span>

            <div class="body">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
        </div>
    </div>
    <div class="message out">
        <img src="http://img2.wikia.nocookie.net/__cb20130220074109/halo/images/8/8d/USER_Sgt_D_Grif_avatar.png" alt="" class="avatar">
        <div class="content">   <a href="javascript:void(0);" class="name">Joseph R. Colston</a>
 <span class="date">at Mar 12, 2014 6:13</span>

            <div class="body">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
            <div></div>
        </div>
    </div>
    <div class="message in">
        <img src="http://img2.wikia.nocookie.net/__cb20130220074109/halo/images/8/8d/USER_Sgt_D_Grif_avatar.png" alt="" class="avatar">
        <div class="content">   <a href="javascript:void(0);" class="name">Margaret J. Collins</a>
 <span class="date">at Mar 12, 2014 6:13</span>

            <div class="body">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
        </div>
    </div>
</div>
相关问题
最新问题