html - 如何使用剩余宽度？

Question

我想让 div2 在 div1 的右侧水平对齐。Div2 还应该拉伸剩余的宽度，这是一个可变数字（浏览器宽度）。如果我将 div2 宽度设置为绝对值（300 像素），我会得到正确的对齐方式，但不会消耗剩余的宽度。

这应该怎么做？

<div id="1" style="float:left;width:100px">
    the first box
</div>
<div id="2" style="float:left;width:100%">
    the second box
</div>

Answer 1

只需让左边的一个浮动，第二个将调整其宽度：

<div id="1" style="float:left;">
    the first box
</div>
<div id="2">
    the second box
</div>

Answer 2

如果您不希望 div2 包裹在 div 下，那么有多少内容并不重要

http://jsfiddle.net/h424c/2/

div {
    display: table-cell;
}

HTML

<div id="a1" style="width:100px">
    the first box
</div>
<div id="a2">
    the second box sfsdf dsf sdfasdf sadf sadf sadf asdf sadf sdaf sadf sdfsadf sdaf asdf sdf sdf sdaf asdf sadf sdaf sdaf sdf sdaf sadf sdf sdf sdaf sdf sadf dsaf sdf sdaf ds
</div>

Answer 3

您可以通过将两个 div 用作一个父级和一个子级来做到这一点。您应该跨浏览器对其进行测试，因为我不知道它是否在 IE 中工作；-) ...“清晰”也会很棒:-)

<div style="width: 100%; border: 1px solid blue;  ">

    <div id="1" style="float:left;width:100px; border: 1px solid red; ">
        the first box
    </div>
        the second box
</div>

示例：http: //jsfiddle.net/5t6Ak/

注意：您的 ID 不应以数字开头！