展开div以填充剩余宽度

我想要一个两列的div布局，其中每个可以具有可变的宽度，例如

div { float: left; } .second { background: #ccc; }

<div>Tree</div> <div class="second">View</div>

我希望'view'div扩展到'tree'div填充所需空间后可用的整个宽度。目前，我的“视图” div已调整为包含它的内容的大小，如果两个div都占据整个高度，那也会很好

不重复免责声明：

设置float：left时，将div扩展为最大宽度，因为左侧的宽度固定。

帮助div-使div适合剩余宽度，因为我需要将两列都向左对齐

#1楼

我不确定这是否是您所期望的答案，但是为什么不将Tree的宽度设置为“ auto”，而将“ View”的宽度设置为100％？

#2楼

这将是与表无关紧要的事情，并且与CSS很难（如果不是不可能的话，至少在跨浏览器的意义上）很难做到。

如果两列的宽度都是固定的，这将很容易。

如果其中一列是固定宽度，这将稍微困难一些，但完全可行。

由于两列的宽度都可变，恕我直言，您只需要使用两列表格即可。

#3楼

如果两个宽度都是可变长度，为什么不通过脚本或服务器端计算宽度呢？

<div style="width: <=% getTreeWidth() %>">Tree</div>

<div style="width: <=% getViewWidth() %>">View</div>

#4楼

看一下可用的CSS布局框架。我建议使用Simpl或稍微复杂一些的Blueprint框架。

如果您使用的是Simpl（仅导入一个simpl.css文件），则可以执行以下操作：

<div class="ColumnOneHalf">Tree</div>
<div class="ColumnOneHalf">View</div>

，用于50-50版面，或：

<div class="ColumnOneQuarter">Tree</div>
<div class="ColumnThreeQuarters">View</div>

，适合25-75的人。

就这么简单。

#5楼

在这里，这可能会有所帮助...

<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>

来源：oschina

链接：https://my.oschina.net/u/3797416/blog/3158022

标签

Simpl.css

blueprint