不使用表格的并排元素

Question

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

注意文本如何保留在按钮区域的右侧，无论文本行数是多少。我试图使用无表格布局来实现相同的效果，并且失败了。有没有好的方法可以在没有桌子的情况下实现这个目标？

Answer 1

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

<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/

Answer 2

.sidebyside { float: left}
<div class="sidebyside">
    <input type="button" value="VoteUp" /><br />
    <input type="button" value="Flag" />
</div>
<div class="sidebyside">Text</div>

这不就是这么简单吗？

修改

你的例子（已修复）：

<div style="overflow: hidden;">
    <div style="float: left;">Left Content</div>
    <div style="float: left; width: 100px;">Right Content Right ContentRight Content Right Content Right Content Right Content Right Content Right Content Right Content Right Content Right Content Right Content Right Content Right Content Right Content Right Content Right Content Right Content Right Content Right Content Right Content  </div>
</div>

Answer 3

替代解决方案：http://jsfiddle.net/7JukV/

只是为了替代......：）