我对 CSS 中的无表格布局一无所知，并且想将一个简单的评论系统转换为一个简单的 CSS 系统，该系统用表格来布置 cmets。这是表格的样子。
<table>
<tr>
<td>
<img src="headshot.gif" width=40 border-0>
</td>
<td><span style="font-color:gold;font-weight:bold;">Kumar</span>
<br>I really liked the movie - 3 days ago</td>
</tr>
</table>
任何人都可以建议使用无表格布局解决此问题的正确方法。
【问题讨论】：
div .img {
display: inline-block;
width: 100px;
background: red;
vertical-align: top;
}
div .text {
display: inline-block;
width: 400px;
background: blue;
}
颜色和宽度并不重要。只需创建几个 inline-block spans。
【讨论】：
inline-block。无论身高如何，他们都会坐在一起。根据其他因素、元素的高度、所需的灵活性等，还有其他方法可以做到这一点。
请从这里查看我的答案：
Make two parallel `<div>` colums the same height
您可以将一个“列”用于图像，另一个用于文本
【讨论】：
我想我可以举个例子来说明我过去发现的有效方法。让我们从 HTML 开始：
<form action="" method="post">
<ul id="regis_ul">
<li id="regis_li">
<label><span> Username: </span>
<span><input type = 'text' name ='username' id ='username' value = ></span>
</label>
</li>
<li id="regis_li">
<label> <span> Password: </span>
<span><input type = 'password' name ='password' id ='password' value ='' ></span>
</label>
</li>
<li id="regis_li">
<label> <span> Retype Password: </span>
<span><input type = 'password' name ='repassword' id ='repassword' value ='' ></span>
</label>
</li>
<li id="regis_li">
<label> <span> Email Address: </span>
<span><input type = 'text' name ='email' id ='email' value ='' ></span>
</label>
</li>
</ul>
<input type='submit' name='submit' value='Register'>
</form>
</div>
这只是建立了一个简单的、类似盒子的结构化系统，允许注册到一个页面，但可以很容易地重组为用于 cmets 的东西。现在这里是关键部分，最初设计一切的 CSS：
#regis_ul {
display:table;
}
#regis_li {
display:table-row-group;
}
#sub_but {
margin-left: 0 auto;
}
span {
display: table-cell;
}
label {
display: table-row;
}
在这方面需要注意的一个关键点是这里的许多 CSS 元素中使用的显示选项。更多详细信息可以在here 中找到，以及可以在 CSS 中使用的许多其他技巧。为了提供更多信息，这种显示方法“欺骗”浏览器认为它是一个表格并像一个表格一样显示它。使用表格和无序列表有什么区别？所有这些信息都可以在here 找到，其中列出了优缺点。
现在您可能想知道这实际上是什么样子，我已经提供了一个 JsFiddle 与确切的表示。
那你现在做什么？好吧.. 我鼓励您使用我提供的代码，它将帮助您找到您想要的评论系统的确切布局。需要注意的几件事，您最终将需要.. 一个 div，它实际上将整个元素集保存在其中（例如确保所有信息都保留在框中的安全预防措施），然后是一个无序列表创建结构化流程...
最后，我想提一下，您可以使用此评论系统轻松实现 MySQL 和 PHP，但如果您不知道那是什么，那就不用担心 :)。我鼓励您探索和使用我的示例，并使用Almanac 查看有关 CSS 中很酷的东西的更多信息。
祝你未来的编码项目好运，我希望它对你来说一切顺利:)
【讨论】：