保持兩個浮動div在同一行內的一個較小的容器

Question

我試圖建立一個大致看起來像this JSFiddle的佈局。現在，問題是：

我有這兩個包裝在我的container，一個是側邊欄和其他（wrapper-inner-container）是爲頁面內容本身，都浮動到左側和wrapper-sidebar有一個機制隱藏並顯示。

的事情是，當wrapper-sidebar可見時，wrapper-inner-container，其中有100vw一個width，應保持向左浮動，在同一行wrapper-sidebar和家長container應保持與同100vw的width並簡單地隱藏水平溢出。但是，正如你在JSFiddle中看到的那樣，因爲同一行中的兩個包裝都超過了容器的寬度，所以wrapper-inner-container跳到下一行，當它應該和wrapper-sidebar保持在同一行時，並且留下100vw的width。我如何實現這一目標？

Answer 1

如果您的目的是wrapper-inner-container佔用剩餘空間，wrapper-sidebar可見或不可見。那麼你可以做到這一點，應該忽略wrapper-inner-container的寬度，並刪除float: left。它會自動調整大小到100％的可用空間，因爲它是一個塊元素。

https://jsfiddle.net/bdxs8x9r/4/（更新）

而且，這裏有一個如何你可以用flex-box多一點始終實現它的一個例子：

這裏的竅門是wrapper-sidebar有一個固定的寬度和wrapper-inner-container彎曲到它的剩餘空間在容器裏。

https://jsfiddle.net/bdxs8x9r/3/

Answer 2

要做到這一點，你必須創建包含主容器，你將其溢出設置爲隱藏和它的寬度100vw

然後設置主父容器容器寬度100vw加邊欄大小，所以這種方式，邊欄將有空間到內部容器推入

<style> 
.overflow { 
    width: 100vw; 
    overflow: hidden; 
} 
.container { 
    width: 115vw; 
} 
.wrapper-sidebar { 
    float: left; 
    width: 15vw; 
} 
.wrapper-inner-container { 
    width: 100vw; 
    float: left; 
} 
</style> 

<script> 
// do your animation code here 
</script> 

<div class="overflow"> 
    <div class="container"> 
     <div class="wrapper-sidebar"></div> 
     <div class="wrapper-inner-container"></div> 
    </div> 
</div>