浮动对象越过另一个浮动对象

Question

我的网站上有一个评论部分，我使用左浮动来制作用户信息的左侧，评论正文的右侧是右浮动， 现在，如果有人输入了太长的文本，它会在下一条评论上超过另一个，我怎样才能让它看起来更好。 例如，我添加了一个 JSfiddle。 谢谢

https://jsfiddle.net/czz2qwab/8/

html:

 <div class="comment">
                    <div class="left">
                        <li><img src=""></li>
                        <div class="cmnt-gr">
                         <h5> <a class="user" href="">just me</a></h5>

                           <h6 class="time">now</h6>
                        </div></li>
                    </div>
                    <div class="right">
                        <li>
                                <h6 class="comment-b"> try try try trytry try try try try try try try try trytry try try try try try try try try trytry try try try try try try try try trytry try try try try try try try try trytry try try try try try try try try trytry try try try try try try try try try</h6>
                        </li>
                    </div>

    <div class="comment">
                    <div class="left">
                        <li><img src=""></li>
                        <div class="cmnt-gr">
                         <h5> <a class="user" href="">just me</a></h5>

                           <h6 class="time">now</h6>
                        </div></li>
                    </div>
                    <div class="right">
                        <li>
                                <h6 class="comment-b">try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try trytry try try try try try try try try trytry try try try try try try try try trytry try try try try try try try try trytry try try try try try try try try trytry try try try try try try try try trytry try try try try try try try try trytry try try try try try try try try trytry try try try try try try try try trytry try try try try try try try try try</h6>
                        </li>
                    </div>
                  <div class="comment">
                    <div class="left">
                        <li><img src=""></li>
                        <div class="cmnt-gr">
                         <h5> <a class="user" href="">just me</a></h5>

                           <h6 class="time">now</h6>
                        </div></li>
                    </div>
                    <div class="right">
                        <li>
                                <h6 class="comment-b">try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try trytry try try try try try try try try trytry try </h6>
                        </li>
                    </div>

    <div class="comment">
                    <div class="left">
                        <li><img src=""></li>
                        <div class="cmnt-gr">
                         <h5> <a class="user" href="">just me</a></h5>

                           <h6 class="time">now</h6>
                        </div></li>
                    </div>
                    <div class="right">
                        <li>
                                <h6 class="comment-b">try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try trytry try try try try try try try try trytry try try try try try try try try trytry try try try try try try try try trytry try try try </h6>
                        </li>
                    </div>
        <div class="comment">
                    <div class="left">
                        <li><img src=""></li>
                        <div class="cmnt-gr">
                         <h5> <a class="user" href="">just me</a></h5>

                           <h6 class="time">now</h6>
                        </div></li>
                    </div>
                    <div class="right">
                        <li>
                                <h6 class="comment-b">try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try trytry try try try try try try try try trytry try try try try try try try try trytry try try try try try try try try trytry try try try try try try try try try try try try try try try try try try try try try try try try try try try</h6>
                        </li>
                    </div>

css:

 .left{
        float:left;
        width:40%;
        /*
        background: #333;
        */
       height:60px;
    }
    .right{
        float:right;
        width:60%;
        /*
        height:100px;
        */
        /*
        border-top: 1px solid #e8e8e8;
        */
        vertical-align: text-top;

        height:60px;
    }
    .comment{
        background: #fafafa;
        /*
        overflow-y: scroll;
        */
        font-family: "Roboto", sans-serif;
    position: relative;
        vertical-align: text-top;

    }
    .comment li{
      list-style:none;
    }

Answer 1

cale_b 在评论中提到您的标记无效。他没有错。我已经清除了无关的列表项标签<li></li>。正如 cal_b 所提到的，它们属于有序列表或无序列表的子级。所以我已经修改了一些事情来做我认为你希望完成的事情；这是将用户和日期/时间与每个评论相关联。您的标记一团糟，没有一个 <div class="comment"> 标记具有相应的结束 </div> 标记。为了清楚地了解哪里出了问题，有必要首先验证您的标记。

了解浏览器放置在某些元素上的默认值也很有帮助。将您的内容包装在标题标签 h5 和 h6 中，而不解决默认边距可能会产生意想不到的副作用。浏览器可能会在某些元素上放置自己的默认边距和/或填充，您不能期望任何一致性。因此，解决项目 CSS 中的这些默认设置将大大有助于建立可预测的跨浏览器一致性。那里有许多“重置”修复，here's one。这就是为什么您的文本显示为中间对齐的原因，尽管您尝试在 CSS 中进行垂直对齐。在大多数现代浏览器中使用 inspector/DevTools 将帮助您了解意外填充/边距/行高可能出错的地方。

由于您在每个浮动 div 上定义了固定高度，这自然会限制每个评论可以包含的评论内容的数量，而无需对溢出做任何事情。您的示例正在显示溢出，当视口充分受限时，它会叠加在下面的评论上。

但删除高度定义会产生意想不到的副作用（为清楚起见插入了背景颜色）：

我猜这就是您首先定义height 属性的原因。这是清除浮动可以帮助解决问题的地方。如this answer to a similar question 中所述，清除每个.comment 容器中的浮动可以修复上面屏幕截图中出现的意外内容包装。您可以通过创建一个新的div 或使用::after 伪类插入为您进行清除的内容来完成此操作。我进一步应用了一些样式和颜色来实现效果：

如您所见，您的 cmets 现在可以包含任意数量的内容。清除浮动意味着您不再需要担心一个 .comment 容器的内容会干扰另一个容器的内容。

我的 jsfiddle 修改：https://jsfiddle.net/afilbert/czz2qwab/9/

另外，还有一篇关于浮动的非常全面的文章的链接：https://css-tricks.com/all-about-floats/