我有 2 个 div 需要水平排列,我知道第二个的宽度,我需要第一个来占用所有剩余的可用空间。任何人都可以帮助我并告诉我css以实现这一目标吗?
5 回答
你可以这样做:
<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。
尝试做这样的事情:
<div style="width:200px; float:left;"></div>
<div style="width:auto;"></div>
您可以使用百分比,当您不关心确切的宽度时,这很方便。如果您需要精确的宽度,请使用 javascript 获取您知道的 div 的 offsetwidth,并浮动两个 div。然后,相应地设置另一个 div 的宽度。我要注意的是以像素为单位设置另一个 div 的值——如果用户调整窗口大小,你必须考虑它,这需要更多的工作。如果您不需要完全精确,请将另一个 div 设置为百分比,这将自动处理窗口大小调整。其他问题也随之而来,但基本上这是实现它的一种方式。
尝试将第二个容器的宽度设置为您的已知值,将第一个容器的宽度设置为width:100%;
你的要求有点棘手。但这应该工作......
这样做是使用 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 - 所以您可能需要限制宽度!