html - 如何将元素的宽度设置为从特定位置到页面末尾(水平)

Question

问题来了。我正在尝试放置一些 <div>彼此相邻的元素。 div 的宽度s 未指定，取决于它们的内容。我正在使用下面的 CSS 代码来定位 <div>彼此相邻:

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

我要最后一个<div> s 宽度以覆盖页面的其余部分(水平)。使用绝对定位，可以为最后一个 <div> 设置左侧位置然后使用 width:100%用于 CSS 样式。但是因为我不知道另一个的大小 <div> s，我不能使用这种方法。

有人可以帮我处理我的案子吗？

Answer 1

根据您的浏览器支持需求，您可以使用基于表格的布局(使用表格或通过 css)，如 @user2519211 所示，或者您可以使用 flexbox，这将更快更灵活 (ha)从长远来看。

只需要将要覆盖页面的元素的容器设置为display: flex(包含浏览器前缀)

这是一个 JS Bin 显示的:http://jsbin.com/uqepit/2/edit

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

http://css-tricks.com/snippets/css/a-guide-to-flexbox/ http://css-tricks.com/using-flexbox/