html – 防止浮动div下降到下一行

概述我正在寻找创建一个由任意数量的水平对齐div组成的查看器,在任何给定时间只有3个可见. <div id="viewport"> <div id="slides"> <div>Content 1</div> <!-- not visible --> <div>Content 2</div> <!-- visible --> <div>Conte 我正在寻找创建一个由任意数量的水平对齐div组成的查看器,在任何给定时间只有3个可见.

<div ID="vIEwport">    <div ID="slIDes">        <div>Content 1</div> <!-- not visible -->        <div>Content 2</div> <!-- visible -->        <div>Content 3</div> <!-- visible -->        <div>Content 4</div> <!-- visible -->        <div>Content 5</div> <!-- not visible -->        <div>...</div> <!-- not visible -->    </div></div>

我的方法是有一个固定宽度/高度的父div(“vIEwport”)和溢出：隐藏然后滑动其子div(“幻灯片”),其子div中的实际内容,向左或向右.

为了使它能够工作,我需要将“幻灯片”的子div全部水平对齐,而不是将它们包裹在下面,默认情况下会发生这种情况.当我知道并在CSS中指定“幻灯片”div的子元素的累积宽度时,我成功地执行了此 *** 作,但我将在Js中动态添加/删除它们.我想避免不断通过Js不断改变“幻灯片”div的宽度,而只是想知道如何在CSS中做到这一点.

简而言之,如果总宽度未知,如何防止一系列div包裹在下面？

解决方法 我认为 http://jsfiddle.net/5JHW5/2/就是你想要的.它使用jquery来计算#slIDes的宽度并适当地设置其宽度.我还添加了一些滚动控件,只是因为我喜欢做那样的事情.
如果你需要在示例中看到更多,我告诉我.

干杯!

总结

以上是内存溢出为你收集整理的html – 防止浮动div下降到下一行全部内容，希望文章能够帮你解决html – 防止浮动div下降到下一行所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。