展开一个div来取其余的宽度
我想要一个双列div布局，其中每个可以有可变的宽度，例如
div { float: left; } .second { background: #ccc; } <div>Tree</div> <div class="second">View</div>
我想'视图'div扩大到'树'div填补需要的空间后可用的整个宽度。 目前我的“视图”div被调整到它包含的内容。如果两个div都占据整个高度，这也是很好的
不重复免责声明：
浮动时将div扩展为最大宽度：设置为left，因为左边的宽度是固定的。
帮助div – 使div适合其余的宽度，因为我需要两列都alignment到左侧
解决这个问题其实很简单，但并不明显。 你必须触发一个叫做“块格式化上下文”（BFC）的东西，它以一种特定的方式与浮点数交互。
只需要第二个div，删除浮动，并给它overflow:hidden而不是overflow:hidden 。 除可见性之外的任何溢出值都会使其设置的块成为BFC。 BFC不允许后裔浮游物逃离它们，也不允许兄弟/祖先浮游物闯入它们。 这里的净效果是浮动的div将做的事情，然后第二个div将是一个普通的块，占用所有可用的宽度， 除了浮动占用 。
这应该适用于所有当前的浏览器，尽pipe你可能不得不在IE6和7中触发hasLayout。我不记得了。
演示：
- 固定左： http : //jsfiddle.net/A8zLY/5/
- 固定的权利： http : //jsfiddle.net/A8zLY/2/
我刚刚发现了柔性盒的魔力（display：flex）。 尝试这个：
<style> #box { display: flex; float: left; } #b { flex-grow: 100; border: 1px solid green; } </style> <div id='box'> <div id='a'>Tree</div> <div id='b'>View</div> </div>
Flex盒子给了我希望css已经15年的控制权。 它终于来了！ 更多信息： https ： //css-tricks.com/snippets/css/a-guide-to-flexbox/
这将是一个很好的例子，这些例子对于使用表来说是微不足道的（如果不是不可能的话，至less在跨浏览器的意义上）来处理CSS。
如果两列都是固定的宽度，这将是容易的。
如果其中一列是固定的宽度，这将是稍微困难，但完全可行。
有两列可变宽度，恕我直言，你只需要使用一个双列表。
检查这个解决scheme
.container { width: 100%; height: 200px; background-color: green; } .sidebar { float: left; width: 200px; height: 200px; background-color: yellow; } .content { background-color: red; height: 200px; width: auto; margin-left: 200px; } .item { width: 25%; background-color: blue; float: left; color: white; } .clearfix { clear: both; }
<div class="container"> <div class="clearfix"></div> <div class="sidebar">width: 200px</div> <div class="content"> <div class="item">25%</div> <div class="item">25%</div> <div class="item">25%</div> <div class="item">25%</div> </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>
使用计算。 example`
.leftSide { float: left; width: 50px; background-color: green; } .rightSide { float: left; width: calc(100% - 50px); background-color: red; }
<div style="width:200px"> <div class="leftSide">a</div> <div class="rightSide">b</div> </div>
我不明白为什么人们愿意努力工作，为使用旧的TABLE标签的简单柱状布局find一个纯CSS解决scheme。
所有浏览器仍然有表格布局的逻辑…也许叫我恐龙，但我说让它帮助你。
<table WIDTH=100% border=0 cellspacing=0 cellpadding=2> <tr> <td WIDTH="1" NOWRAP bgcolor="#E0E0E0">Tree</td> <td bgcolor="#F0F0F0">View</td> </tr> </table>
Flexbox解决scheme
html, body { height: 100%; } .wrapper { display: flex; height: 100%; } .second { flex-grow: 1; }
<div class="wrapper"> <div style="background: #fc9;">Tree</div> <div class="second" style="background: #ccc;">View</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="right">View</div> <div style="width: <=100% getTreeWidth()100 %>">Tree</div> <div class="clear" /> </div> <div class="ColumnWrapper"> <div class="ColumnOneHalf">Tree</div> <div class="ColumnOneHalf">View</div> </div> </body> </html>
感谢Simpl.css的插件！
记得像这样将所有的列包装在ColumnWrapper 。
<div class="ColumnWrapper"> <div class="ColumnOneHalf">Tree</div> <div class="ColumnOneHalf">View</div> </div>
我即将发布Simpl.css的1.0版本，所以帮助传播这个词！
一个稍微不同的实现，
两个div面板（内容+额外），并排， content panel扩展，如果extra panel不存在。
jsfiddle： http : //jsfiddle.net/qLTMf/1722/
帕特 – 你是对的。 这就是为什么这个解决scheme能够同时满足“恐龙”和同时代人。 🙂
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <style type="text/css"> .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%; } .txtCont .ip { width: 100%; max-width: 100%; min-width: 30% } </style> </head> <body> <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> </body> </html>
您可以尝试CSS网格布局 。
dl { display: grid; grid-auto-columns: max-content auto; } dt { grid-column: 1; } dd { grid-column: 2; margin: 0; background-color: #ccc; }
<dl> <dt>lorem ipsum</dt> <dd>dolor sit amet</dd> <dt>carpe</dt> <dd>diem</dd> </dl>
林不知道这是你期待的答案，但是，为什么不把树的宽度设置为“自动”和“视图”的宽度为100％？
如果使用最新的浏览器（IE> = 9，FF> = 19，Chrome> = 26，safari> = 6），并且同一行上另一个区域的宽度是固定的，那么如何使用calc函数呢？
width: calc(100% - 20px)
而不是20px，你可以写在同一行的另一节的固定宽度。 这样宽度将被计算和应用，即剩余宽度。
PS不支持Opera！ 🙁
看看可用的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一个。
就这么简单。
我写了一个JavaScript函数，我从jQuery $（document）.ready（）调用。 这将parsing父div的所有孩子，只更新最正确的孩子。
HTML
... <div class="stretch"> <div style="padding-left: 5px; padding-right: 5px; display: inline-block;">Some text </div> <div class="underline" style="display: inline-block;">Some other text </div> </div> ....
JavaScript的
$(document).ready(function(){ stretchDivs(); }); function stretchDivs() { // loop thru each <div> that has class='stretch' $("div.stretch").each(function(){ // get the inner width of this <div> that has class='stretch' var totalW = parseInt($(this).css("width")); // loop thru each child node $(this).children().each(function(){ // subtract the margins, borders and padding totalW -= (parseInt($(this).css("margin-left")) + parseInt($(this).css("border-left-width")) + parseInt($(this).css("padding-left")) + parseInt($(this).css("margin-right")) + parseInt($(this).css("border-right-width")) + parseInt($(this).css("padding-right"))); // if this is the last child, we can set its width if ($(this).is(":last-child")) { $(this).css("width","" + (totalW - 1 /* fudge factor */) + "px"); } else { // this is not the last child, so subtract its width too totalW -= parseInt($(this).css("width")); } }); }); }
你可以使用包含“ rest ”类的W3.CSS库：
<!DOCTYPE html> <html> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <body> <div class="w3-row"> <div class="w3-col " style="width:150px"><p>150px</p></div> <div class="w3-rest w3-green"><p>w3-rest</p></div> </div> </body> </html>
如果两个宽度都是可变长度，为什么不用一些脚本或服务器端来计算宽度？
<div style="width: <=% getTreeWidth() %>">Tree</div>
<div style="width: <=% getViewWidth() %>">View</div>
