获取位置：相对宽度：100％divs彼此相邻浮动

Question

I have a container which is 100% width (thus whatever width the viewport happens to be), and inside it I have 3 child divs which are also 100% width (so they fill the container which fills the viewport), I want to be able to slide a div into the center (so it's visible in the viewport and not outside) when a corresponding link is clicked (I'm actually using twitter bootstrap 3.0 tabs for this, but I'm overriding the default fade-in/fade-out behaviour in favour of creating my own slide-in/slide-out behaviour).

I'm currently managing this with position:absolute on the 3 divs and then keeping 2 outside the container (to the left and right) using negative left positioning (eg left:-100%/left:100%) which works just fine, the only issue is I need the 3 divs to be position:relative so they stay inside the document flow, since they're also all of a dynamic height (on each page load, and then they grow as successive data is loaded into them on vertical page scroll) which has caused me to hit a wall.

TLDR: I need 3 position:relative divs which are 100% width to all have the same top value and be next to each other as if they were float:left (though 2 will always be outside their container div which is also 100% width)

There might not be an appropriate solution, but I thought it was worth a shot to ask.

Answer 1

I had a similar problem some days ago. My approach was as follows:

Markup:

<div class="outer">
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
</div>

CSS:

.outer {
    width: 300%;
    margin-left: -100%;
}
.inner {
    width: 33.33333%;
    float: left;
}

With this code the middle inner div is visible in the viewport. All three inner divs are floating next to each other. So if you want to get the first or the third inner div into the viewport you just have to set the margin-left of the outer div to 0% / -200% using Javascript.

If you want to have a slide effect you have to add a CSS transition to the .outer class for the margin-left.

I used this approach for a mobile website with off-canvas menus, and it works pretty well for me. I hope this helps!!