如何创建灵活的 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>