防止浮动div跳到下一行

Question

防止浮动div跳到下一行

4

我希望创建一个浏览器，由任意数量的水平对齐的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")，它具有固定的宽度/高度和overflow: hidden属性，然后将其子div("slides")向左或向右滑动，该子div中包含实际内容的子div。

为了使此方法起作用，我需要"slides"的子div都水平对齐，并且没有任何一个子div会换行，但默认情况下会出现这种情况。当我知道并指定CSS中"slides" div的所有子元素的累积宽度时，我可以成功做到这一点，但是我将在JS中动态添加/删除它们。我想避免不断通过JS更改"slides" div的宽度，而是想找出如何在CSS中完成它。

总之，如果总宽度未知，如何防止一系列div换行呢？

- liamacheung

为什么不使用列表而是使用div，并在CSS中将其设置为内联呢？ - Bert

我相信这只允许它增长到其父级的大小（在这种情况下为#viewport），但是我需要它比父级更宽。有什么想法吗？ - liamacheung

所以你的意思是div的大小将由其内容确定？ - Bert

尝试使用我的示例，但我不确定那是否是你想要的。 - Bert

4个回答

2

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

干杯！

- Luke

这假设每个内容项的宽度都相同。如果它们不是，那么你仍然可以按照我的方式来做，但会稍微复杂一些。 - Luke

我本来希望能够避免使用JS动态调整幻灯片的宽度，但这个方法可行。谢谢。 - liamacheung

抱歉，在你的问题中刚刚看到了这个。我会尝试只使用CSS来完成它。 - Luke

0

这是你想要的示例吗？

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

- Bert

0

如果您将 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;
}

- gcbenison

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nathan Arthur · Accepted Answer

这个技巧是将 #slides 的宽度设置得足够大，这样您就不必担心它，然后使用您的 #viewport div 剪切到所需的宽度，在此 fiddle 中演示。通过简单地调整 #slides 的 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代码不会被更改。