防止浮动div下降到下一行

我期待创建一个由任意数量的水平对齐的div组成的查看器，其中在任何给定时间只有3个可见。防止浮动div下降到下一行

<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实际内容滑动，向左或向右。

为了达到这个目的，我需要“滑块”的子div全部水平对齐，它们中的任何一个都会在下面打包，默认情况下会发生这种情况。当我知道并指定CSS中“幻灯片”div的子元素的累积宽度时，我成功完成此操作，但我将在JS中动态添加/删除它们。我想避免不得不通过JS不断改变“幻灯片”div的宽度，而只是想知道如何在CSS中做到这一点。

因此，总之，如果总宽度未知，我该如何防止一系列div打包在下面？

来源

2012-02-29 liamacheung

为什么不使用的，而不是DIV名单，并在网上在CSS？ – Bert 2012-02-29 02:03:12

我相信这只允许它增长到其父（在这种情况下#viewport）的大小，我需要它的宽度比。有任何想法吗？ – liamacheung 2012-02-29 02:12:12

所以你的平均大小的div将由其内容决定？ – Bert 2012-02-29 02:15:01

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

干杯！

来源

2012-02-29 02:45:58 Luke

这假定每个内容项目具有相同的宽度。如果他们不是，那么你仍然可以按照我的方式做，但会稍微复杂一些。 – Luke 2012-02-29 02:48:43

我希望避免使用JS来动态调整幻灯片的宽度，如果可能的话，但这是有效的。谢谢。 – liamacheung 2012-02-29 03:06:30

对不起，只是在你的问题中阅读。我会考虑只用css来做。 – Luke 2012-02-29 03:14:48

关键是要设置#slides来，你将永远不必担心它，然后用你#viewport DIV，as demonstrated in this fiddle它砍你所需的宽度足够大的宽度。通过简单地调整的left值，您可以左右移动您的div区域。

的CSS：

#viewport { 
    width:300px; 
    overflow:hidden; 
} 

#slides { 
    width:1000px; 
    position:relative; 
    left:-150px; 
} 

#slides div { 
    width:100px; 
    height:100px; 
    float:left; 
    border:1px solid black; 
}

你的HTML保持不变。

来源

2012-02-29 02:02:12

在这个例子中，#slides是已知的宽度。你能修改到CSS不去那个假设？ – liamacheung 2012-02-29 02:07:09

只要你使div足够宽（千万像素，如果你喜欢），定义宽度应该不成问题。 – 2012-02-29 02:10:17

这是你想要的一个例子。

<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; }

来源

2012-02-29 02:06:41 Bert

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

<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; 
}

来源

2012-02-29 04:37:51 gcbenison

防止浮动div下降到下一行

回答

相关问题