Html 如何设置元素'；从特定位置到页面末尾的宽度（水平）

问题出在这里。我试图将一些

元素放在一起。

div

s的宽度未指定，取决于其内容。我正在使用下面的CSS代码将

放置在彼此旁边：

#div{
    height: 50px;
    float:left;
    margin-left:0;
}

我希望最后的

s宽度覆盖页面的其余部分（水平）。使用绝对定位，可以为最后一个

设置左位置，然后为CSS样式使用

宽度：100%

。但是因为我不知道其他

的大小，所以我不能使用这种方法

---

有人能帮我处理我的案子吗？

您可以使用表格来完成这项工作：

<table>
    <tr>
        <td>asdf</td>
        <td>asdf</td>
        <td>asdf</td>
        <td style="width: 100%;">asdf</td>
    </tr>
</table>

---

根据您的浏览器支持需求，您可以使用@user2519211所示的基于表格的布局（使用表格或通过css），也可以使用flexbox，从长远来看，flexbox将更快速、更灵活（ha）

您只需将要覆盖页面的元素容器设置为具有

display:flex

（包括浏览器前缀）

下面是一个JS文件箱，显示了以下内容：

从那里你可以做很多事情，包括重新排序、基线移动等。如果flexbox是一个选项，Chris Coyer已经对当前支持的内容（以及语法背后的内容）做了一些伟大的研究。你可以在这里看到：

---

您是否得到了div元素dynamicallyYes，这就是为什么我无法知道div的宽度，我还有另一个问题。我听说对于布局，我们应该尽可能避免使用表（这不是真的吗？）。我希望有一个非表的答案在一个完美的世界中，您可以使用表来显示数据行。不幸的是，CSS以前很少提供用于定位灵活宽度元素的替代方案，因此表也用于定位元素。从技术上讲，它没有什么问题，它完成了任务，但它不是最初设计的目的。

<div style="display: table; width: 100%;">
    <div style="display: table-cell;">asdf</div>
    <div style="display: table-cell;">asdf</div>
    <div style="display: table-cell;">asdf</div>
    <div style="display: table-cell; width: 100%;">asdf</div>
</div>