21

我有一个固定高度为 50px 和 100% 宽度的表格。

在该表内，我有两个 div，在同一行，如下所示：

<table>
  <tr>
    <td>
      <div id="1"></div>
    </td>
    <td>
      <div id="2"></div>
    </td>
  </tr>
</table>

第一个 div 有float:left，第二个有float:right。

所以表格是页面的 100%。我希望 div2 包装它的内容，并 div1 填充剩余空间，以便 div2 像这样向右对齐：

+--------------------------------------------------------------+
| [ DIV 1          (Expands)       ][ DIV 2 AND ITS CONTENTS ] |
+--------------------------------------------------------------+

以及当 div1 的内容少于整行时我目前得到的结果：

+--------------------------------------------------------------+
| [ DIV 1 ][ DIV 2 ]                                           |
+--------------------------------------------------------------+

如果没有桌子，我可以让它直接左右浮动，但是当它们“聚在一起”时，它们会相互包裹而不是彼此相邻。

编辑：我在这里添加了一个新的jsfiddle。这是工作示例。尝试从左侧 div 中删除除一个以外的所有链接，然后查看结果。第二个 div 应该留在最右边。我希望我自己解释。

4

4 回答 4

40

使用 td 的“colspan”属性。前任：

    <td colspan=75%> info </td>
于 2013-02-13T20:51:24.193 回答
18

解决了添加width:100%到表中。

http://jsfiddle.net/HRT5E/1/

table {
    width:100%;
}
于 2013-02-13T21:25:20.983 回答
4

只需添加width: 100%到第一个td，浏览器就会自动填充它的宽度。

于 2019-06-11T10:30:26.880 回答
0

首先，您的表格似乎根本没有设置为页面的整个宽度。您想为标记添加宽度样式或宽度属性。

接下来只需在右侧“div”（或更准确地说<TD>）上设置一个固定宽度，第一个将填充剩余空间。

正如其他人指出的那样，包装表似乎没有必要。

于 2013-02-13T21:18:47.570 回答