制作一个看起来像表格中的一行的 <div>？答案

【问题标题】：Making a <div> that looks like a row in a table?制作一个看起来像表格中的一行的 <div>？
【发布时间】：2010-05-27 21:41:21
【问题描述】：

我在创建看起来像表格中的一行的布局时遇到问题，我需要它看起来像：

--------- ---------------------------
|       | Line of text              |
|       | Line of text              |
|       |                           |
--------- ---------------------------

所以我正在尝试类似的东西：

<div>
  <img src="" />
  <div float=left>Line of text</div>
  <div float=left>Line of text</div>
</div>

显示不正确，看起来文本行没有占据整个高度，与 img 的底部一样高。我想对整行进行纯色，我该怎么做？

谢谢

【问题讨论】：

它不能是有什么原因吗？

请记住，虽然世界让您认为表格是纯粹的邪恶，但它们不是，它们的使用方式导致了问题。它在大多数社区中被接受，对于表格数据“表格”非常好。

标签： html css

【解决方案1】：

我同意 Scobal 的评论....如果您要显示的是表格数据，那么在表格中显示它在语义上是正确的。

如果没有，理论上你可以将 div 的 img float 属性设置为 left，然后将两个文本 div 包装在一个外部 div 中并浮动那个。

【讨论】：

【解决方案2】：

如果我没记错的话，看起来像是带有头像的评论或带有头像的用户数据。

<div class="user">
  <img class="avatar">
  <div class="user-info">
    <p>line of text</p>
    <p>line of text</p>
  </div>
</div>

css:

.avatar {
  width: <width here>.px; 
  float: left;
  background: #ccc;
}

.user-info {
  float: left;
}

当然记得clear your floats。

如果你想要更多语义，你也可以用列表代替 div：P

【讨论】：