2

我有 2 个 div 需要水平排列，我知道第二个的宽度，我需要第一个来占用所有剩余的可用空间。任何人都可以帮助我并告诉我css以实现这一目标吗？

4

5 回答 5

2

你可以这样做：

<div style="width:500px;">
    <div style="width:100px;float:right;background-color:cyan;">bar</div>
    <div style="margin-right:100px;background-color:magenta">foo</div>
</div>

bar 浮动在右侧 100px 处，位于 foo 的边距之上。foo 占用另外 400px。

于 2012-09-28T18:59:56.313 回答
2

尝试做这样的事情：

<div style="width:200px; float:left;"></div>
<div style="width:auto;"></div>
于 2012-09-28T18:33:53.880 回答
0

您可以使用百分比，当您不关心确切的宽度时，这很方便。如果您需要精确的宽度，请使用 javascript 获取您知道的 div 的 offsetwidth，并浮动两个 div。然后，相应地设置另一个 div 的宽度。我要注意的是以像素为单位设置另一个 div 的值——如果用户调整窗口大小，你必须考虑它，这需要更多的工作。如果您不需要完全精确，请将另一个 div 设置为百分比，这将自动处理窗口大小调整。其他问题也随之而来，但基本上这是实现它的一种方式。

于 2012-09-28T18:34:18.077 回答
0

尝试将第二个容器的宽度设置为您的已知值，将第一个容器的宽度设置为width:100%;

于 2012-09-28T18:32:33.100 回答
0

你的要求有点棘手。但这应该工作......

http://jsfiddle.net/2hseV/2/

这样做是使用 div 定位。这应该是跨浏览器兼容的。我这样做的原因是没有简单的方法说“有两个兄弟 div，其中一个消耗所有可用空间”而不将第二个 div 推到右边。

例如，如果您尝试使用百分比，您要么将 div 推到右侧，要么缩短：

<div style="width: 200px; height: 100px;">
  <div style="width: 100%; height: 100%; float: left;"></div>
  <div style="width: 90px; height: 100%; float: left;"></div>
  <div style="clear: both;"></div>
</div>

因此，我建议您使用绝对位置g 将第二个 div 重叠到第一个 div 上，如下所示：

<div style="width: 200px; height: 100px; position: relative;">
  <div style="width: 100%; height: 100%; float: left; position: relative;"><!-- Content of first div here --></div>
  <div style="width: 90px; height: 100%; float: left; position: absolute; right: 0; top: 0;"><!-- Content of second div here --></div>
</div>

您必须记住的一件事是，如果您的第一个 div 变得太宽，它的内容将低于第二个 div - 所以您可能需要限制宽度！

于 2012-09-28T18:40:42.370 回答