HTML

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

注意文本全部停留在按钮区域的右侧,无论文本有多少行。 我正在尝试使用无表格布局来实现相同的效果,并且失败得很惨。 没有任何好的方法来实现这个没有表格?


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

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


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

备用解决方案:http://jsfiddle.net/7JukV/

只是为了替代... ... :)

链接地址: http://www.djcxy.com/p/6913.html

上一篇: html

下一篇: Multiple django sites on Apache / Windows / mod