展开div以填充剩余宽度

时间 2020-01-16

标签展开 div 填充剩余宽度栏目 CSS 繁體版

原文原文链接

我想要一个两列的div布局，其中每一个能够具备可变的宽度，例如 css

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

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

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

不重复免责声明： 浏览器

设置float：left时，将div扩展为最大宽度，由于左侧的宽度固定。服务器

帮助div-使div适合剩余宽度，由于我须要将两列都向左对齐框架

#1楼

我不肯定这是不是您所指望的答案，可是为何不将Tree的宽度设置为“ auto”，而将“ View”的宽度设置为100％？ ide

#2楼

这将是与表可有可无的事情，而且与CSS很难（若是不是不可能的话，至少在跨浏览器的意义上）很难作到。布局

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

若是其中一列是固定宽度，这将稍微困难一些，但彻底可行。 code

因为两列的宽度均可变，恕我直言，您只须要使用两列表格便可。 htm

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