Css Div水平对齐，一个固定，一个自适应

我想使用两个div创建垂直拆分的站点结构：

<div id="d1" style="width:100px;float:left"></div>
<div id="d2" style="width:auto;float:left"></div>

<div id="d1" style="width:100px;float:left"></div>
<div id="d2" style="width:auto;float:left"></div>

我的目的是让d2与d1在同一条直线上水平对齐。 我得到的不是这个。 事实上，使用该代码，d2不会占用剩余的空间，而是折叠到最小宽度

如果我使用

<div id="d1" style="width:100px;float:left"></div>
<div id="d2" style="width:100%;float:left"></div>

<div id="d1" style="width:100px;float:left"></div>
<div id="d2" style="width:100%;float:left"></div>

错误，因为d2下降并占据所有空间，但两个div位于不同的行中

如何达到我的目标？这个问题有没有设计模式

谢谢

好的，这应该是正确的问题

大家好。我想使用两个div创建垂直拆分的站点结构：

<div id="d1" style="width:100px;float:left"></div>
<div id="d2" style="width:auto;float:left"></div>

<div id="d1" style="width:100px;float:left"></div>
<div id="d2" style="width:auto;float:left"></div>

我的目的是让d2与d1在同一条直线上水平对齐。我得到的不是这个。事实上，使用该代码，d2不会占用剩余的空间，而是折叠到最小宽度

如果我使用

<div id="d1" style="width:100px;float:left"></div>
<div id="d2" style="width:100%;float:left"></div>

<div id="d1" style="width:100px;float:left"></div>
<div id="d2" style="width:100%;float:left"></div>

错误，因为d2下降并占据所有空间，但两个div位于不同的行中

如何达到我的目标？这个问题有没有设计模式

---

谢谢。

您可能希望使用如下表格：

<table width="100%" style="table-layout:fixed">
<tbody>
<tr>
<td width="100px"> </td>
<td width="100%"> </td>
</tr>
</tbody>
</table>

CSS方法：

<div style="width:100%; position:relative">
<div style="width:100px;float:left"> </div>
<div style="width:100%;position:absolute;padding-left:100px;left:0;top:0"> </div>
</div>

---

很抱歉，在发布代码时出现了问题：这是第一个代码：这是第二个，我认为HTML/CSS问题是糟糕措辞的最大罪魁祸首。请设计一些图表，上传图片或截图你的浏览器。是的，这是我想得到的结果，但使用表格创建布局是一种不推荐的方法，我想找到一种方法来做同样的事情使用CSS。。。