Question

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

--------- ---------------------------
|       | 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的底部。我想为整行着色，我该怎么做？

由于

Answer 1

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

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

Answer 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

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

2 个答案: