向右浮动不起作用

时间：2018-06-12 05:20:46

标签： html css

我正在尝试建立一个聊天系统，它在我的本地工作得非常好，但似乎我错过了某些CSS或HTML？我试过比较我的文件＆amp;看不到任何遗漏。

首先，这是我做的JS小提琴：https://jsfiddle.net/xefhrj73/1/

正如您所看到的，前2条消息显示正确，但在float:left元素上，化身位于div下方而不是侧面，我猜这是打破我{{1}的其余部分从它继续的元素？

我尝试添加float:right，将头像放在左侧，但打破了消息之间的格式

clear:inherit
 
.chat-left .chat-avatar {
    float: left;
}
.chat-left .chat-body {
    margin-right: 0;
    margin-left: 30px;
}
.chat-left .chat-content {
    float: left;
    margin: 0 0 10px 20px;
    color: #555;
    background-color: #d7d7d7;
}
.chat-avatar .avatar {
    position: relative;
    display: inline-block;
    width: 40px;
    white-space: nowrap;
    border-radius: 1000px;
    vertical-align: bottom;
}
.chat-avatar .avatar img {
    width: 100%;
    max-width: 100%;
    height: auto;
    border: 0 none;
    border-radius: 1000px;
}
.chat-avatar .avatar {
    width: 30px;
}
.chat-avatar {
    float: right;
}
.chat-body {
    display: block;
    margin: 10px 30px 0 0;
    overflow: hidden;
}
.chat-content {
    position: relative;
    display: block;
    float: right;
    padding: 8px 15px;
    margin: 0 20px 10px 0;
    clear: both;
    color: #fff;
    background-color: #ff5722;
    border-radius: .286rem;
    max-width: 400px;
    -moz-transition: all .3s ease 0s;
    -webkit-transition: all .3s ease 0s;
    -o-transition: all .3s ease 0s;
    transition: all .3s ease 0s;
    word-wrap: break-word;
}
.chat-content p{
    color:rgba(255, 255, 255, 0.82);
}

1 个答案:

答案 0 :(得分：1)

在开始每个左聊天/右聊天div之前添加clearfix div 你的代码也有一些不需要的结束div。尝试格式化代码，以便清楚地看到这些内容。

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.chat-left {
   display: flex;
}

＆＃13;
＆＃13; 
.chat-left .chat-avatar {
  float: left;
}

.chat-left .chat-body {
  margin-right: 0;
  margin-left: 30px;
}

.chat-left .chat-content {
  float: left;
  margin: 0 0 10px 20px;
  color: #555;
  background-color: #d7d7d7;
}

.chat-avatar .avatar {
  position: relative;
  display: inline-block;
  width: 40px;
  white-space: nowrap;
  border-radius: 1000px;
  vertical-align: bottom;
}

.chat-avatar .avatar img {
  width: 100%;
  max-width: 100%;
  height: auto;
  border: 0 none;
  border-radius: 1000px;
}

.chat-avatar .avatar {
  width: 30px;
}

.chat-avatar {
  float: right;
}

.chat-body {
  display: block;
  margin: 10px 30px 0 0;
  overflow: hidden;
}

.chat-content {
  position: relative;
  display: block;
  float: right;
  padding: 8px 15px;
  margin: 0 20px 10px 0;
  clear: both;
  color: #fff;
  background-color: #ff5722;
  border-radius: .286rem;
  max-width: 400px;
  -moz-transition: all .3s ease 0s;
  -webkit-transition: all .3s ease 0s;
  -o-transition: all .3s ease 0s;
  transition: all .3s ease 0s;
  word-wrap: break-word;
}

.chat-content p {
  color: rgba(255, 255, 255, 0.82);
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.chat-left {
  display: flex;
}

.chat-right>div {}
＆＃13; 
<div class="chat chat-right ">
  <div class="chat-avatar">
<a class="avatar" data-toggle="tooltip" href="" data-placement="right" title="Backend">
                <img src="https://www.gravatar.com/avatar/30aa172009d1e4e569d31a54899af0ee.jpg?s=80&amp;d=mm&amp;r=g" alt="Backend's Avatar">
            </a>
  </div>
  <div class="chat-body">
<div class="chat-content">
  <p>Hey I&#039;d like more information regarding this property!</p>
  <time class="chat-time" datetime="2018-06-11 16:06:39"> 1 hour ago <i class="fa fa-check m-l-5 text-read" data-toggle="tooltip" data-placement="right" title="Read"></i></time>
</div>
  </div>
  <div class="chat-content" style="margin-right:50px;">
<p>test</p>
<time class="chat-time" datetime="2018-06-11 17:24:22"> 23 minutes ago <i class="fa fa-check m-l-5 text-read" data-toggle="tooltip" data-placement="right" title="Read"></i></time>
  </div>
</div>





<div class="clearfix"></div>
<div class="chat chat-left ">
  <div class="chat-avatar">
<a class="avatar" data-toggle="tooltip" href="" data-placement="left" title="Default">
                <img src="https://www.gravatar.com/avatar/88b87698be0bc461f3cacf1f080929d5.jpg?s=80&amp;d=mm&amp;r=g" alt="Default's Avatar">
            </a>
  </div>
  <div>
<div class="chat-content" style="margin-right:50px;">
  <p>hi</p>
  <time class="chat-time" datetime="2018-06-11 17:34:32"> 13 minutes ago</time>
</div>
<div class="chat-content" style="margin-right:50px;">
  <p>hey</p>
  <time class="chat-time" datetime="2018-06-11 17:34:58"> 13 minutes ago</time>
</div>
  </div>
</div>



<div class="clearfix"></div>

<div class="chat chat-right ">
  <div class="chat-avatar">
<a class="avatar" data-toggle="tooltip" href="" data-placement="right" title="Backend">
                <img src="https://www.gravatar.com/avatar/30aa172009d1e4e569d31a54899af0ee.jpg?s=80&amp;d=mm&amp;r=g" alt="Backend's Avatar">
            </a>
  </div>
  <div class="chat-body">
<div class="chat-content" style="margin-right:50px;">
  <p>hey</p>
  <time class="chat-time" datetime="2018-06-11 17:36:13"> 12 minutes ago <i class="fa fa-check m-l-5 text-read" data-toggle="tooltip" data-placement="right" title="Read"></i></time>
</div>
<div class="chat-content" style="margin-right:50px;">
  <p>hi hi hi</p>
  <time class="chat-time" datetime="2018-06-11 17:36:22"> 11 minutes ago <i class="fa fa-check m-l-5 text-read" data-toggle="tooltip" data-placement="right" title="Read"></i></time>
</div>
  </div>
</div>



<div class="clearfix"></div>
<div class="chat chat-left ">
  <div class="chat-avatar">
<a class="avatar" data-toggle="tooltip" href="" data-placement="left" title="Default">
                <img src="https://www.gravatar.com/avatar/88b87698be0bc461f3cacf1f080929d5.jpg?s=80&amp;d=mm&amp;r=g" alt="Default's Avatar">
            </a>
  </div>
  <div>
<div class="chat-content" style="margin-right:50px;">
  <p>hi hi hi hi</p>
  <time class="chat-time" datetime="2018-06-11 17:36:55"> 11 minutes ago</time>
</div>
<div class="chat-content" style="margin-right:50px;">
  <p>lol from creator</p>
  <time class="chat-time" datetime="2018-06-11 17:37:55"> 10 minutes ago</time>
</div>
  </div>

</div>



<div class="clearfix"></div>
<div class="chat chat-right ">
  <div class="chat-avatar">
<a class="avatar" data-toggle="tooltip" href="" data-placement="right" title="Backend">
                <img src="https://www.gravatar.com/avatar/30aa172009d1e4e569d31a54899af0ee.jpg?s=80&amp;d=mm&amp;r=g" alt="Backend's Avatar">
            </a>
  </div>
  <div class="chat-body">
<div class="chat-content" style="margin-right:50px;">
  <p>lol from buyer</p>
  <time class="chat-time" datetime="2018-06-11 17:38:45"> 9 minutes ago <i class="fa fa-check m-l-5 text-read" data-toggle="tooltip" data-placement="right" title="Read"></i></time>
</div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

更新了fiddle

相关问题
最新问题