展开一个div来取其余的宽度

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

我想'视图'div扩大到'树'div填补需要的空间后可用的整个宽度。 目前我的“视图”div被调整到它包含的内容。如果两个div都占据整个高度,这也是很好的

不重复免责声明:

浮动时将div扩展为最大宽度:设置为left,因为左边的宽度是固定的。

帮助div – 使div适合其余的宽度,因为我需要两列都alignment到左侧

19 Solutions collect form web for “展开一个div来取其余的宽度”

解决这个问题其实很简单,但并不明显。 你必须触发一个叫做“块格式化上下文”(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> 
  • 溢出:隐藏+显示:内联块向上移动文本
  • 如何在两个HTML页面之间交换variables?
  • 表格而不是DIVs
  • 删除额外的空白周围的iframe?
  • 如何防止DIV标签开始新行?
  • 在触摸设备上的浏览器中禁用双击“缩放”选项
  • 防止iPhone缩放forms?
  • 是否有相当于在HTML电子邮件中工作的CSS最大宽度?
  • 有一个倒挂的字符?
  • 如何将PHP代码/文件添加到HTML(.html)文件?
  • Java:如何在Java中隐藏HTML字符实体?