你如何让下面的 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>
最佳答案
将这些添加到您的 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">
关于html - 您将如何设置此 html 的样式以便将所有内容都放入表格中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5559058/