html

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

Live Sample: 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>

Isn't it just as simple as this?

EDIT

Your example (fixed):

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

---

Alternate solution: http://jsfiddle.net/7JukV/

Just for the sake of alternatives... :)

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

上一篇: 在Javascript中触发mousemove如何工作？

下一篇: HTML