并行元素，不使用表 [英] Side-by-side elements without using tables

问题描述

我注意到StackOverflow诉诸于在帖子下方的注释区域使用基于表格的布局：

I've noticed that StackOverflow resorted to using a table-based layout for the comments area beneath posts:

请注意，文本全部保留在按钮区域的右侧，而不管有多少行文本。我试图使用无表的布局实现相同的效果，并失败凄惨。

Notice how the text all stays to the right of the button area, regardless of how many lines of text there are. I am trying to accomplish the same effect using a table-less layout, and failing miserably. Is there any good way to do achieve this without tables?

推荐答案

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

I think this is a good start:

<div class="comment-row">
    <ul class="icon-set">
        <li class="icon-1"><a href="">icon</a></li>
        <li class="icon-2"><a href="">icon</a></li>
    </ul>
    <div class="comment">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
</div>

CSS：

.comment-row { position relative; }
.icon-set { position: absolute; }
.icon-set a {
    display: block;
    text-indent: -99999px;
    border: 1px solid;
    width: 16px;
}
.comment { margin-left: 30px; }

现场示例：
http://jsfiddle.net/HPbFJ/

这篇关于并行元素，不使用表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！