css - 在 css 中使用溢出

Question

我如何将前 2 个 div 的宽度设置为动态(适合内容宽度)，而第 3 个 div 应使用剩余的水平空间并水平滚动。

我需要的结果是所有 3 个 div 并排放置，并且第 3 个 div 可以横向滚动。

我的脚本如下

HTML

<div id="a">
  <table>
    <tr><td>text</td></tr>
  </table>
</div>
<div id="b">
  <table>
    <tr><td>text</td></tr>
  </table>
</div>
<div id="c">
  <table>
    <tr><td>text</td></tr>
  </table>
</div>

CSS

div#a
{
float: left;
}
div#b
{
float: left;
}
div#c
{
float: left;
width: 100%;
overflow-x: scroll;
}

上面的脚本将 div3 推到下一行，这是我不想要的。

Answer 1

如果您将 #a 和 #b float 到左侧，#c 将填充父级宽度的其余部分。

要使 #c 水平滚动，您将其内容容器设置为:

#c .scroll-content {

    /* You shouldn't do this on a table, but rather on a wrapping container. */
    display: inline-block;
    white-space: nowrap;
    overflow: auto;
    overflow-y: hidden;
}

我做了一个例子at JSFiddle .