0

这就是问题所在。我试图将一些<div>元素放在一起。s的宽度div没有指定，取决于它们的内容。我正在使用下面的 CSS 代码将<div>s 并排放置：

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

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

谁能帮我处理我的案子？

4

2 回答 2

0

您可以使用表格来执行此操作：

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

display: table如果必须使用 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>
于 2013-06-25T10:46:36.377 回答
0

根据您的浏览器支持需求，您可以使用 @user2519211 所示的基于表格的布局（使用表格或通过 css），或者您可以使用 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/

于 2013-06-25T10:53:51.387 回答