Html 如何使用剩余宽度？

我想让div2在div1的右边水平对齐。Div2还应该拉伸剩余的宽度，这是一个可变的数字（浏览器宽度）。如果我将div2 width设置为绝对值（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>

第一个盒子
第二个盒子

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

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

第一个盒子
第二个盒子

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

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

第一个盒子
第二个盒子

您可以使用两个div作为一个父div和一个子div。您应该跨浏览器测试它，因为我不知道它是否在IE中工作；-）。。。另外，一个“清晰”也很好：-）

第一个盒子
第二个盒子

例如：

---

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

您可以使用两个div作为一个父div和一个子div。您应该跨浏览器测试它，因为我不知道它是否在IE中工作；-）。。。另外，一个“清晰”也很好：-）

第一个盒子
第二个盒子

例如：

---

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

如果您不想将div2包装在div下，那么不管有多少内容

HTML

第一个盒子
第二个方框是sfsdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf asdf sdf sdf sdf sdf sdf asdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sadf sdf sdf sdf sdf sdf sdf sdf ds

如果您不想将div2包装在div下，那么不管有多少内容

HTML

第一个盒子
第二个方框是sfsdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf asdf sdf sdf sdf sdf sdf asdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sadf sdf sdf sdf sdf sdf sdf sdf ds

当div 2的内容大于div 1时会发生什么？当div 2的内容大于div 1时会发生什么？如果div2正在从另一个div进行复杂的继承，并将宽度设置为100%，是否有方法覆盖它？宽度：自动覆盖100%值吗？如果div2从另一个设置宽度：100%的div进行复杂继承，有没有方法覆盖它？宽度：是否自动覆盖100%值？

div {
    display: table-cell;
}

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