你会如何设计这个 html 以便所有内容都落入表格中?
如何使以下 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>
How would you make the following html fall into a table-like structure where each div.comment_column
falls horizontally next to one another? I prefer to use CSS and not tables:
<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>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
将这些添加到您的 css 中:
并将 : 更改
为:
Add these to your css :
And change :
to :