我想要一个两列div布局，其中每一个都可以有可变的宽度。
div { 浮:左; ｝ 接着{ 背景:# ccc; ｝ < div > < / div >树 < < div class = "第二”>视图/ div >
我想要“视图”div扩展到整个可用的宽度后，“树”div已经填补了所需的空间。
目前，我的“视图”div被调整为它所包含的内容 如果两个跳水都占据整个高度也会很好。
不可重复声明:
当设置float:left时，将div扩展到最大宽度 因为左边的宽度是固定的。 帮助div -使div适合剩余的宽度 因为我需要两列都向左对齐
当前回答
如果另一列的宽度是固定的，那么如何使用适用于所有常见浏览器的calc CSS函数:
width: calc(100% - 20px) /* 20px being the first column's width */
这样，第二行的宽度将被计算(即剩余宽度)并响应地应用。
其他回答
我不明白为什么人们愿意如此努力地为简单的柱状布局寻找一个纯css解决方案，而使用旧的TABLE标签是如此容易。
所有浏览器仍然有表布局逻辑…也许你可以叫我恐龙，但我说让它帮你。
<table WIDTH=100% border=0 cellspacing=0 cellpadding=2> < tr > <td WIDTH="1" NOWRAP bgcolor="#E0E0E0">Tree</td> . < td背景= " # F0F0F0 " >视图td > < / < / tr > 表> < /
在跨浏览器兼容性方面风险也小得多。
flex-grow -定义必要时伸缩项目增长的能力。它接受一个作为比例的无单位值。它规定了项目在伸缩容器内应该占用多少可用空间。
如果所有项都将flex-grow设置为1，则容器中的剩余空间将平均分配给所有子容器。如果其中一个子节点的值为2，那么剩余的空间将占用其他节点两倍的空间(至少它会尝试这样做)。点击这里查看更多信息
.parent { 显示:flex; ｝ .child { flex-grow: 1;//它接受作为比例的无单位值 ｝ .left { 背景:红色; ｝ 铃声{ 背景:绿色; ｝ < div class = "父" > <div class="child left"> 剩下的50% < / div > <div class="儿童权利"> 正确的50% < / div > < / div >
使用CSS Flexbox flex-grow属性填充剩余空间。 Html, body { 高度:100%; ｝ 身体{ 显示:flex; ｝ 接着{ flex-grow: 1; ｝ < span style="background: #bef;"树> < / div > <div class="second" style="background: #ff9;"视图> < / 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处理起来很难(如果不是不可能的话，至少在跨浏览器的意义上)。
如果两列的宽度都是固定的，这就很容易了。
如果其中一列的宽度是固定的，这将稍微困难一些，但完全可行。
两个列的宽度可变，恕我直言，你只需要使用一个两列的表。
