2

如何将前 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 推送到下一行，这是我不想要的。

4

3 回答 3

3

如果您向左浮动，#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;
}

我在 JSFiddle做了一个例子。

于 2013-03-11T03:52:11.827 回答
2

您应该设置一个父 div 将它们全部放在同一行中。像这样的东西应该可以工作。

<div id="parent">

<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>

</div>


div#a
{
float: left;
}
div#b
{
float: left;
}
div#c
{
float: left;
}

#parent{
width: 100%;
overflow-x: scroll;
}

此外，您可能想要重构您的代码。由于所有的 div 都向左浮动，因此您可能只想使用一个向左浮动的类。我希望这有帮助。

于 2013-03-11T03:27:17.483 回答
0

CSS...

  #a {
float:left;
border:solid 1px #000;
width:33%;
}   

#b {
float:left;
border:solid 1px #000;
width:33%;
}

#c {
float:left;
border:solid 1px #000;
width:33%;
}

.scroll{
float:left;
overflow:auto;
width:100%;
}

.content {
width:1000px;
overflow:auto;
}

和HTML...

<div id="a">
This is text within my first content box
</div>

<div id="b">
This is text within my second content box 
</div>

<div id="c">
<div class="scroll-content">
This is text within my third content box and this is horizontal and scrollable
</div>
</div>

再次更新下面的 JSFIDDLE 链接！！！

还有一个关于jsfiddle的演示- http://jsfiddle.net/GeLqV/1/

马克，这对你有用。我现在看到您希望所有三个 div 位于同一行，并且最后一个能够水平滚动。看看我的 jsfiddle 演示。无论您的屏幕尺寸是多少，所有三个 div 的尺寸都是流动的，并且会保持在一起（大部分情况下）。

于 2013-03-11T03:54:32.567 回答