另一个div内的两个div和向左滑动

我有一个div，它的宽度被掩盖掉了。在里面，我有2个宽度相同的div，所以100％+ 100％。这意味着左侧可见或右侧任何时候都可见。另一个div内的两个div和向左滑动

事实上，我想要实现几乎是完全一样的：

只是一个区别，但。我父母的身高并不固定，这取决于孩子的大小。所以当我向父母申请position: absolute;时，一切都是梨形的。

对此的任何解决方案？如果需要，我可以使用flexbox，因为我不支持IE8/9。

CSS会是这样的

.outer-wrap { 
    overflow:hidden; 
    position:relative; 
    width:300px; 
} 

.middle-wrap { 
    overflow:hidden; 
    position:absolute; // this doesn't work because it has no fixed height 
    left:0; 
    width:600px; 
} 

.middle-wrap.open { 
    right:0; 
} 

.inner-wrap { 
    float:left; 
    width:300px; 
}

HTML

<div class="outer-wrap"> 
    <div class="middle-wrap"> 
     <div class="inner-wrap"></div> 
     <div class="inner-wrap"></div> 
    </div> 
</div>

来源

2016-03-28 John Ohara

请在您的问题中加上[mcve] – j08691

注意：浮动元素不会影响其父元素的高度 - 如果父元素仅包含浮动元素并且没有固定高度，则父元素保持高度0 ... – Johannes

@Johannes - 我只是试图在不使用绝对定位的情况下达到上述目的。 –

另一个编辑：我创建了一个codepen，它在这里：http://codepen.io/anon/pen/oxwmex点击最右边的两个按钮，它们之间进行切换各州

正如您所述，您的解决方案不起作用，因为.middle-wrap没有固定的高度。（：没有花车，没有绝对的位置注）：用以下设置试试吧

.outer-wrap { 
    overflow-x: hidden; 
    position: relative; 
    border: 1px solid red; 
    width: 300px; 
    margin: 0 auto; 
} 

.middle-wrap { 
    position: relative; 
    width: 600px; 
    left: 0px; 
} 

.inner-wrap { 
    display: inline-block; 
    width: 300px; 
    vertical-align: top; 
}

这会的.outer-wrap可见部分内显示两个.inner-wrap S的左侧。为了让看得见的权利.inner-wrap申请类似

jQuery(".middle-wrap").css("left", "-300px")

给你用两个内包装之间切换的元素或事件。或者，如果你想它的动画：

jQuery(".middle-wrap").aminmate({left: "-300px"})

（加上另一种方法来切换回left: 0px）

所有元素的heigth会自动调整为两个.inner-wrap元素的更高的heigth。

P.S. （编辑）：从HTML中的内包装中清除style="height:100px;"设置，只需填充一些内容即可看到它的工作。

来源

2016-03-28 15:09:10 Johannes

另一个div内的两个div和向左滑动

回答

相关问题