html - 向右浮动不工作

Question

我正在尝试制作一个聊天系统，它在我本地运行得非常好，但似乎我在某处错过了一些 CSS 或 HTML？我试过比较我的文件，看不到任何丢失的东西。

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

正如您所看到的，前 2 条消息显示正确，尽管在float:left元素上，头像位于 div 下方而不是侧面，我猜这会破坏我的其余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);
}

<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>
<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>
<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 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>
<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="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-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>
<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="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 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>
<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="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-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>

标签： htmlcss

Answer 1

在开始每个左聊/右聊 div 之前添加一个clearfixdiv 您的代码还有一些不需要的关闭 div。始终尝试格式化您的代码以清楚地看到这些内容。

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

.chat-left {
   display: flex;
}

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

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

更新的小提琴