在css中使用溢出

如何设置第一个2 div的宽度为动态（适合内容宽度），而第三个div应该使用剩余的水平空间并可水平滚动。在css中使用溢出

我需要的结果是所有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到下一行，我不想。

来源

2013-03-11 Mark

只是供参考，当你为ID的声明样式时，你不需要#a或#b或#c前面的div。在大多数情况下，您只需拥有#a {}，#b {}，#c {}。 – blackhawk 2013-03-11 03:22:23

如果您希望#c始终在#a和#b下，请在#c中删除float：left属性，而使用clear：both; – blackhawk 2013-03-11 03:24:13

前2个父div容器的宽度应该适合您的内容的大小。您可以通过添加边框来直观地了解：solid 1px＃000;到前两种风格。 – blackhawk 2013-03-11 03:27:07

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

为了得到#c水平滚动，你的风格其内容的容器为：

我做出了表率at JSFiddle。

来源

2013-03-11 03:52:11

对不起，忘了滚动功能。马上回来。 – 2013-03-11 03:54:26

现在好多了。 – 2013-03-11 04:07:05

谢谢，完美的作品。 – Mark 2013-03-11 04:31:01

你应该设置一个父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-11 03:27:17

不是我想到的，我只需要第三个div可以滚动，我已经澄清了这个问题。感谢您的CSS提示！ – Mark 2013-03-11 03:48:13

不客气。你有没有尝试给#c添加最小宽度？哦，你还应该给父母添加一个宽度。 – 2013-03-11 04:04:42

的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以下链接AGAIN！

而且在jsfiddle演示 - http://jsfiddle.net/GeLqV/1/

马克，这会为你现在的工作。我现在看到你想要在同一行上的所有三个div，最后一个可以水平滚动。看看我的jsfiddle演示。不管你的屏幕尺寸是多少，所有三个div的尺寸都很大，并且会保持在一起（大部分）。

来源

2013-03-11 03:54:32 blackhawk

小提琴不工作（html在脚本框中），我相信“c”应该在“a”和“ “b” – 2013-03-11 04:07:16

我的坏人！我刚纠正了jsfiddle链接！ – blackhawk 2013-03-11 04:12:22

@blachawk，谢谢，但我需要的内容框并排，而不是彼此顶部。 – Mark 2013-03-11 04:22:58

在css中使用溢出

回答

相关问题