[英]Stopping floated divs from wrapping to a new line
我有一个包含许多左浮动div的容器,类似于:
<div id="container">
<div class="panel"></div>
<div class="panel"></div>
<div class="panel"></div>
</div>
<style>
.panel {float:left; width:200px;}
</style>
在我的应用程序中,用户可以动态地向容器添加越来越多的面板,我希望它们总是在右侧堆叠,并且当用户超出可用空间时,可以显示水平滚动条。
jsfiddle: http : //jsfiddle.net/yzTFC/6/
浮动元素取决于其容器的宽度,不会影响容器的大小。 如果可能,请不要在这种情况下使用浮动元素。 我会使用display:inline-block with a white-space:nowrap on parent。
另一种方法是在容器上给出一个非常大的宽度,但我不建议这样做,因为它看起来很草率。
这是一篇关于浮点数如何工作的好文章: http : //coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/
试试这个:
HTML
<div id="parent-container">
<div id="container">
<div class="panel"></div>
<div class="panel"></div>
<div class="panel"></div>
<div class="panel"></div>
<div class="panel"></div>
<div class="panel"></div>
</div>
</div>
CSS
.panel {float:left; width:200px; background-color:red; height:100px; border:solid 1px black;}
#container { width: 9999px; }
#parent-container {
overflow: auto;
}
演示: http : //jsfiddle.net/yzTFC/50/
我的回答与艾曼相似。 我还添加了另一个容器。
HTML
<div id="wrapper">
<div id="panel-container">
<div class="panel"></div>
<div class="panel"></div>
<div class="panel"></div>
<div class="panel"></div>
<div class="panel"></div>
<div class="panel"></div>
</div>
</div>
CSS
.panel {float: left; width:200px; background-color:red; height:100px; border:solid 1px black;}
#wrapper {width: 606px; overflow-x: scroll; overflow-y: hidden; }
#panel-container {width: 1212px;}
其中#plate-container CSS width是其中.panels的倍数,因此需要一些脚本才能实现这一点。 最有可能是一些javascript。
#wrapper宽度是任意的,我只是决定在视口中一次显示三个面板。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.