Как бы вы создали этот HTML-код, чтобы все попадало в таблицу? - PullRequest
Новая
       18

Как бы вы создали этот HTML-код, чтобы все попадало в таблицу?

0 голосов
/ 06 апреля 2011

Как бы вы сделали следующий 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>

1 Ответ

0 голосов
/ 06 апреля 2011

Добавьте это к вашему 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">
...