防止浮动div下降到下一行 [英] Prevent floating divs from dropping to next line

问题描述

我想要创建一个由任意数量的水平对齐的div组成的查看器，其中在任何给定时间只有3个可见。

I'm looking to create a viewer composed of an arbitrary number of horizontally-aligned divs where only 3 are visible at any given time.

<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隐藏，然后将其子div（幻灯片）（其子div中的实际内容）向左或向右滑动。

My approach is to have a parent div ("viewport") of fixed width/height and overflow: hidden then to slide its child div ("slides"), which has the actual contents in its child divs, to the left or the right.

工作，我需要的幻灯片的子div都是水平对齐，没有一个包装下面，这将发生默认情况下。我成功地做到这一点，当我知道和指定CSS的幻灯片div的孩子的累积宽度，但我将动态添加/删除它们在JS。我想避免不断地改变幻灯片div通过JS的宽度，而宁愿只是找出如何在CSS中做它。

In order for this to work, I need the child divs of "slides" to be all horizontally aligned with none of them wrapping below, which will happen by default. I'm successful in doing this when I know and specify the cumulative width of the children of the "slides" div in CSS, but I will be dynamically adding/removing them in JS. I would like to avoid having to constantly change the width of the "slides" div through JS and would rather just find out how to do it in CSS.

，如果总宽度未知，如何防止一系列div包含在下面？

So in short, how do I prevent a series of divs from wrapping below if the total width is unknown?

推荐答案

我认为 http://jsfiddle.net/5JHW5/2/ 是你想要的。它使用jQuery来计算 #slides 的宽度，并适当地设置其宽度。我还添加了一些控件滚动，只是因为我喜欢做这样的东西。
如果你需要在我给出的例子中看到更多，让我知道。

I think that http://jsfiddle.net/5JHW5/2/ is what you're wanting. It uses jQuery to figure what the width of #slides is and sets its width appropriately. I also added in some controls for scrolling, just because I like doing stuff like that. If you need to see more in the example I gave let me know.

干杯！

这篇关于防止浮动div下降到下一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！