你会如何设计这个 html 以便所有内容都落入表格中？

Question

如何使以下 html 变成一个类似表格的结构，其中每个 div.comment_column 水平相邻？我更喜欢使用 CSS 而不是表格：

<div class="comments_div">

    <div class="comment_column">
        <div id="comment_title_23" class="comment_title">
            What do you think of the lyrics?
            <a href="/comment_titles/23" class="comment_title_delete" data-method="delete" data-remote="true" rel="nofollow">x</a>
        </div>
        <div class="comment" id="comment_4">
             Great lyrics!
        </div>
    </div>

    <div class="comment_column">
        <div id="comment_title_25" class="comment_title">
            What should my next song be?
            <a href="/comment_titles/25" class="comment_title_delete" data-method="delete" data-remote="true" rel="nofollow">x</a>
        </div>
        <div class="comment" id="comment_4">
             Nice job! Do a another song next.
        </div>
    </div>

    <div class="comment_column">
        <div id="comment_title_26" class="comment_title">
            Feedback
            <a href="/comment_titles/26" class="comment_title_delete" data-method="delete" data-remote="true" rel="nofollow">x</a>
        </div>
        <div class="comment" id="comment_4">
             Awesome stuff... next time rap a little more than sing but still great job.
        </div>   
    </div>

</div>

Answer 1

将这些添加到您的 css 中：

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

.comment_colum {
    float: left;
    /* width: 200px; <-- can set a width here */
}

并将 : 更改

<div class="comments_div">

为：

<div class="comments_div clearfix">