如何将前 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 推到下一行,这是我不想要的。
最佳答案
如果将 #a
和 #b
向左浮动,#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 .
关于css - 在CSS中使用溢出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15330652/