Question

我在我的网站上有一个评论部分，我使用左侧浮动向左侧显示用户信息，右侧放置评论正文，右侧浮动，现在，如果有人输入了太长的文本，那么下一个评论会在另一个文本中运行，我怎样才能让它看起来更好。我添加一个JSfiddle例如。感谢

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>。正如cale_b所提到的，那些属于有序或无序列表的子项。所以我修改了一些东西来做我认为你希望完成的事情;这是将用户和日期/时间关联到每个评论。您的标记很乱，<div class="comment">个标记都没有相应的结束</div>标记。为了清楚地了解出现问题的地方，首先验证您的标记是必要的。

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

由于您在每个浮动div上定义了固定高度，因此自然会限制每个注释可以包含的注释内容量，而不会对溢出执行某些操作。您的示例显示溢出，当视口充分受限时，溢出会叠加在下面的注释中。

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

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

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

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

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

float对象遍历另一个float对象

1 个答案: