如何創建靈活的 div 容器，將浮動行為與動態寬度和高度結合起來？

Question

我正在嘗試創建以下情況，其中content_container的寬度到達屏幕右側並根據可展開窗格是否折疊自動縮放。 如果我將width: 100%放在.content_container上，它會超出屏幕的寬度，從而創建一個不必要的滾動條並切換到可擴展窗格下方。 您還可以看到expandable_pane的高度沒有達到父級的全部范圍，但content_container的高度可以。

顯然，我在基本層面上沒有理解一些東西，因為我承認我對各種顯示類型和行為的掌握並不扎實，我仍在學習。 任何幫助，將不勝感激。

 $(document).ready(function(){ $("#expandable_pane").click(function(){ if(this.className.search("collapsed").= -1){ this.className = this.className,replace("collapsed"; "extended"). } else { this.className = this.className,replace("extended"; "collapsed"); } }) })

 .expandable_pane{ float: left; box-shadow: 1px 1px 10px 1px rgb(98,98,98); overflow: hidden; white-space: nowrap; height: 100%; padding: 2px; transition: width.5s; }.expandable_pane.collapsed { width: 10px; }.expandable_pane.extended { width: 500px; }.flex_container { height: 300px; }.content_container{ float: left; padding-left: 10px; height: 100%; }.content_pane { padding: 10px; box-shadow: 1px 1px 10px 1px rgb(98,98,98); height: 100%; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="flex_container"> <div class="expandable_pane collapsed" id="expandable_pane"> Menu Icons/Links would go here. </div> <div class="content_container"> <div class="content_pane"> Information for page here. </div> </div> </div>

Answer 1

您的代碼離您並不遙遠。 首先，您的.flex_container class 缺少display: flex 。 其次，如果你想讓你的容器占據剩余的空間，它需要能夠彎曲。 如果你給容器flex: 1 100px ，這是一個簡寫屬性，它告訴容器flex-grow: 1 ， flex-basis 為100px 。 使用 flexbox，您不再需要float: left在這種情況下。

嘗試使用這些值來更好地了解 flexbox 是如何工作的，我還建議閱讀有關該屬性的 MDN 文章。 MDN 彈性

 $(document).ready(function(){ $("#expandable_pane").click(function(){ if(this.className.search("collapsed").= -1){ this.className = this.className,replace("collapsed"; "extended"). } else { this.className = this.className,replace("extended"; "collapsed"); } }) })

 .expandable_pane{ box-shadow: 1px 1px 10px 1px rgb(98,98,98); overflow: hidden; white-space: nowrap; height: 100%; padding: 2px; transition: width.5s; }.expandable_pane.collapsed { width: 10px; }.expandable_pane.extended { width: 500px; }.flex_container { display: flex; height: 300px; }.content_container{ padding-left: 10px; flex: 1 100px; height: 100%; }.content_pane { padding: 10px; box-shadow: 1px 1px 10px 1px rgb(98,98,98); height: 100%; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="flex_container"> <div class="expandable_pane collapsed" id="expandable_pane"> Menu Icons/Links would go here. </div> <div class="content_container"> <div class="content_pane"> Information for page here. </div> </div> </div>