防止浮动div下降到下一行

Question

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>

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.

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.

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

Answer 1

The trick is to set #slides to a sufficiently great width that you will never have to worry about it, and then chop it to your desired width using your #viewport div, as demonstrated in this fiddle . By simply adjusting the left value of #slides , you can move your strip of divs left and right.

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

Your HTML remains unchanged.

Answer 2

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.

Cheers!

Answer 3

is this an example of what you want.

<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

If you set display: none on the slides that aren't supposed to be visible, they won't take up any space, and there's no need for a container div any larger than needed to hold your three visible slides. I've added a shown class to three slides to distinguish which ones are visible (you could toggle this in javascript). Setting float=left on div#slides causes it to take up just enough space to fit its children.

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

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