Question

我想让div2水平对齐div1。 Div2还应该拉伸剩余的宽度，这是一个可变数字（浏览器宽度）。如果我将div2宽度设置为绝对值（300px），我得到正确的对齐但丢失了剩余的宽度。

应该怎么做？

<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作为一个父级和一个子级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不应以数字开头！

如何使用剩余宽度？

3 个答案: