Question

我有两个浮动的div 我希望第一个div为100px宽，另一个div的宽度为其余部分。类似的东西：

<div style="float:right;width:100px;height:100px;background:black;"></div>
<div style="float:left;width:100%;height:100px;background:yellow;"></div>

这是jsfiddle。

有一条规则：我不知道页面的宽度！

Answer 1

如果你从第二个div中取出float:left;width:100%;，它应该按你想要的方式工作。当块向右浮动时，非浮动对象围绕它流动。由于您已将height设置为两个块的相同，因此它们排列良好。

我已更新您的jsfiddle以显示其工作原理。

Answer 2

浮动div根据其内容占据宽度。否则你需要根据两个div的容器指定宽度。

<div style="float:right;width:100px;height:100px;background:black;"></div>
<div style="float:left;height:100px;background:yellow;">It will occupy space
    based on contents</div>

或者通过父容器来做......

<div style="width: 400px;">
    <div style="float:right;width:100px;height:100px;background:black;"></div>
    <div style="float:left;width:300px;height:100px;background:yellow;"></div>
</div>

Answer 3

这就是他们过去时代的方式）

<style>
#content { width:auto; height:auto; padding:10px 10px 10px 105px; position:relative; float:left; }
#content #column { position:absolute; top:0; left:0; padding:10px 5px 10px 10px; width:100px; }
</style>

<div id="content">
    <div id="column">Right part</div>
    Left part
</div>

抱歉，暂时没有制作布局，也许在不必支持EI6时更容易。但它应该绝对分辨率，不像只使用浮动块。

浮动div的宽度

3 个答案: