我想要一个两列div布局，其中每一个都可以有可变的宽度。
div { 浮:左; ｝ 接着{ 背景:# ccc; ｝ < div > < / div >树 < < div class = "第二”>视图/ div >
我想要“视图”div扩展到整个可用的宽度后，“树”div已经填补了所需的空间。
目前，我的“视图”div被调整为它所包含的内容 如果两个跳水都占据整个高度也会很好。
不可重复声明:
当设置float:left时，将div扩展到最大宽度 因为左边的宽度是固定的。 帮助div -使div适合剩余的宽度 因为我需要两列都向左对齐
当前回答
使用flexbox这是相当容易的。请参阅下面的代码片段。我添加了一个包装容器来控制流和设置全局高度。还添加了边界以标识元素。注意，div现在也会根据需要展开到全高度。 在现实场景中，应该为flexbox使用供应商前缀，因为它还不完全受支持。
我开发了一个免费的工具来理解和设计使用flexbox的布局。看看这里: http://algid.com/Flex-Designer
.container { 身高:180 px; 边框:3px实心#00f; 显示:flex; 对齐项目:伸展; ｝ div { 显示:flex; 边框:3px solid #0f0; ｝ 接着{ 显示:flex; flex-grow: 1; 边框:3px实体#f00; ｝ < div class = "容器" > < div > < / div >树 < < div class = "第二”>视图/ div > < / div >
其他回答
给，这个可能会有帮助……
<html> <head> <style type="text/css"> div.box { background: #EEE; height: 100px; width: 500px; } div.left { background: #999; float: left; height: 100%; width: auto; } div.right { background: #666; height: 100%; } div.clear { clear: both; height: 1px; overflow: hidden; font-size: 0pt; margin-top: -1px; } </style> </head> <body> <div class="box"> <div class="left">Tree</div> <div class="right">View</div> <div class="clear" /> </div> </body> </html>
看看现有的CSS布局框架。我推荐Simpl或者稍微复杂一点的Blueprint框架。
如果你正在使用Simpl(它只涉及导入一个simple .css文件)，你可以这样做:
<div class="ColumnOneHalf">Tree</div>
<div class="ColumnOneHalf">View</div>
，以进行对半布局，或:
<div class="ColumnOneQuarter">Tree</div>
<div class="ColumnThreeQuarters">View</div>
25-75美元。
就是这么简单。
我不明白为什么人们愿意如此努力地为简单的柱状布局寻找一个纯css解决方案，而使用旧的TABLE标签是如此容易。
所有浏览器仍然有表布局逻辑…也许你可以叫我恐龙，但我说让它帮你。
<table WIDTH=100% border=0 cellspacing=0 cellpadding=2> < tr > <td WIDTH="1" NOWRAP bgcolor="#E0E0E0">Tree</td> . < td背景= " # F0F0F0 " >视图td > < / < / tr > 表> < /
在跨浏览器兼容性方面风险也小得多。
.btnCont { display: table-layout; width: 500px; } .txtCont { display: table-cell; width: 70%; max-width: 80%; min-width: 20%; } .subCont { display: table-cell; width: 30%; max-width: 80%; min-width: 20%; } <div class="btnCont"> <div class="txtCont"> Long text that will auto adjust as it grows. The best part is that the width of the container would not go beyond 500px! </div> <div class="subCont"> This column as well as the entire container works like a table. Isn't Amazing!!! </div> </div>
你可以使用W3的CSS库，它包含了一个叫做rest的类:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> < div class = " w3-row”> <div class="w3-col " style="width:150px"> < p > 150 px < / p > < / div > <div class="w3-rest w3-green"> < p > w3-rest < / p > < / div > < / div >
不要忘记在页面的标题中链接CSS库:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
这里是官方演示:W3学校Tryit编辑器
