Question

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

Answer 1

尝试做类似的事情：

<div style="width:200px; float:left;"></div>
<div style="width:auto;"></div>

Answer 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>

在poo的边缘顶部，

条漂浮在右侧100px中。 foo占用了另外400px。

Answer 3

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

Answer 4

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

Answer 5

你所要求的是有点棘手。但这应该有用......

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>

所以相反，我建议你使用绝对位置将第二个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下面 - 所以你可能需要限制宽度！ < / p>

水平对齐div - 第一个占用所有水平可用空间

5 个答案: