浮动左侧容器悬挂在中间

Question

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

正如您可以看到灰色元数据的灰色文本行：

我希望它像这样，尽管左边是名字长度：

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

我在这里面临同样的问题（所有容器都有浮动：左;）：

Answer 1

您需要在 周围包含一个父元素评论作者姓名和元数据 - .comment-author＆amp; .comment-meta - 然后浮动父元素。 e.g：

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

这将允许评论文本像你想要的那样一直到达该区域的顶部。