html - float 左侧容器卡在中间

Question

我有以下代码:http://jsfiddle.net/69MqZ/1/

如您所见，灰色文本行一直到灰色元数据:

尽管左边的名字很长，但我希望它是这样的:

显然它必须使用 position: relative 或某种技术来使 border-bottom 相应地移动。这是 WordPress 生成的评论输出。

我在这里面临同样的问题(所有容器都有 float: left;):

Answer 1

您需要在评论作者姓名和元数据 周围包裹一个父元素 - .comment-author 和 .comment-meta - 然后 float 该父元素。例如:

 <div class="comment_author_wrap">
 <div class="comment-author vcard">
     <cite class="fn">John Smith</cite> <span class="says">says:</span>        
 </div>

 <div class="comment-meta commentmetadata">
     <a href="#comment-3">May 23, 2010 at 5:04 pm</a>&nbsp;&nbsp;<a title="Edit comment" href="3" class="comment-edit-link">(Edit)</a>        
 </div>
 </div>

然后

.comment_author_wrap {
   float: left;
 }

这将使评论文本如您所愿一直出现到该区域的顶部。