我想要一个两列div布局,其中每一个都可以有可变的宽度。

div { 浮:左; } 接着{ 背景:# ccc; } < div > < / div >树 < < div class = "第二”>视图/ div >

我想要“视图”div扩展到整个可用的宽度后,“树”div已经填补了所需的空间。

目前,我的“视图”div被调整为它所包含的内容 如果两个跳水都占据整个高度也会很好。


不可重复声明:

当设置float:left时,将div扩展到最大宽度 因为左边的宽度是固定的。 帮助div -使div适合剩余的宽度 因为我需要两列都向左对齐


当前回答

我刚刚发现了伸缩盒的魔力(显示:flex)。试试这个:

<style>
  #box {
    display: flex;
  }
  #b {
    flex-grow: 100;
    border: 1px solid green;
  }
</style>
<div id='box'>
 <div id='a'>Tree</div>
 <div id='b'>View</div>
</div>

Flex盒子给了我15年来一直希望css能给我的控制。终于到了!更多信息:https://css-tricks.com/snippets/css/a-guide-to-flexbox/

其他回答

使用CSS Flexbox flex-grow属性填充剩余空间。 Html, body { 高度:100%; } 身体{ 显示:flex; } 接着{ flex-grow: 1; } < span style="background: #bef;"树> < / div > <div class="second" style="background: #ff9;"视图> < / 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 >

.container{ display: flex; align-items: stretch; } .resize_overflow { position: relative; width: 0; overflow: hidden; white-space: nowrap; word-wrap: normal; /* text-overflow: ellipsis; When the end of the line dissolves, the ellipsis loses */ } .second_fix { float: right; /* or: display: flex; align-self: end;*/ } /* Dissolve the end of the line at the right edge */ .resize_overflow::after { content: ""; /* Empty content */ position: absolute; /* Position relative to parent */ right: 0; /* Element position */ top: 0; /* Element position */ width: 40px; /* Gradient width */ height: 100%; /* Parent Height */ background: -moz-linear-gradient(left, rgba(255,255,255, 0.2), #ff 100%); background: -webkit-linear-gradient(left, rgba(255,255,255, 0.2), #ff 100%); background: -o-linear-gradient(left, rgba(255,255,255, 0.2), #ff 100%); background: -ms-linear-gradient(left, rgba(255,255,255, 0.2), #ff 100%); background: linear-gradient(to right, rgba(255,255,255, 0.2), #ff 100%); } <div class="container"> <div class="resize_overflow">Tree</div> <div class="second_fix">View</div> </div>

如果另一列的宽度是固定的,那么如何使用适用于所有常见浏览器的calc CSS函数:

width: calc(100% - 20px) /* 20px being the first column's width */

这样,第二行的宽度将被计算(即剩余宽度)并响应地应用。

给,这个可能会有帮助……

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