另一個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和向左滑動

回答

相關問題