不使用表格的并排元素

Question

我注意到StackOverflow使用基于表格的布局作为帖子下面的评论区域:

注意文本如何都保留在按钮区域的右侧,无论文本行数是多少.我试图使用无表格布局实现相同的效果,并且失败了.没有桌子,有没有什么好方法可以做到这一点？

Answer 1

我认为这是一个好的开始：

<div class="comment-row">
    <ul class="图标集">
        <li class="icon-1"><a href="">图标</a></li>
        <li class="icon-2"><a href="">图标</a></li>
    </ul>
    <div类=“评论”>
        <p>Lorem ipsum dolor sat amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua。Ut enim ad minim veniam, quis nostrud exeritation ullamco labouris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
</div>

CSS：

.comment-row { 相对位置；}
.icon-set { 位置：绝对；}
.icon-设置一个{
    显示：块；
    文本缩进：-99999px；
    边框：1px实线；
    宽度：16px；
}
.comment { 左边距：30px; }

实时示例： http: //jsfiddle.net/HPbFJ/