Question

我正在寻找创建一个由任意数量的水平对齐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包裹在下面？

Answer 1

诀窍是将#slides设置为足够大的宽度，您永远不必担心它，然后使用#viewport div as demonstrated in this fiddle将其切割成所需的宽度。只需调整left的{{1}}值，就可以左右移动div条。

CSS：

#slides

您的HTML保持不变。

Answer 2

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

干杯！

Answer 3

这是你想要的一个例子。

<div class="box">
<div class="div1">1st</div>
<div class="div2">2nd</div>
<div class="div3">3nd</div>
<div class="clear">
</div>

CSS

div.box { background: #EEE; height: 100px; width: 600px; }
div.div1{background: #999; float: left; height: 100%; width: auto; }
div.div2{ background: #666; float: left;height: 100%; width: auto;height: 100%; }
div.div3{ background: green; height: 100%; }
div.clear { clear: both; height: 1px; overflow: hidden; font-size:0pt; margin-top: -1px; }

Answer 4

如果您在不应该看到的幻灯片上设置display: none，它们将不会占用任何空间，并且不需要任何大于容纳三个可见幻灯片所需的容器div 。我在三张幻灯片中添加了一个shown类来区分哪些是可见的（你可以在javascript中切换它）。在float=left上设置div#slides会导致它占用足够的空间来容纳孩子。

<div id="viewport">
  <div id="slides">
    <div>Content 1</div> <!-- not visible -->
    <div class="shown">Content 2</div> <!-- visible -->
    <div class="shown">Content 3</div> <!-- visible -->
    <div class="shown">Content 4</div> <!-- visible -->
    <div>Content 5</div> <!-- not visible -->
  </div>
</div>

CSS：

div#slides {
    float: left;
}

div#slides > div {
    float: left;
    width: 10em;
    height: 10em;
    margin: 1em;
    background-color: red;
    display: none;
}

div#slides > div.shown {
    display: block;
}

防止浮动div下降到下一行

4 个答案: