我想要一个两列div布局，其中每一个都可以有可变的宽度。
div { 浮:左; ｝ 接着{ 背景:# ccc; ｝ < div > < / div >树 < < div class = "第二”>视图/ div >
我想要“视图”div扩展到整个可用的宽度后，“树”div已经填补了所需的空间。
目前，我的“视图”div被调整为它所包含的内容 如果两个跳水都占据整个高度也会很好。
不可重复声明:
当设置float:left时，将div扩展到最大宽度 因为左边的宽度是固定的。 帮助div -使div适合剩余的宽度 因为我需要两列都向左对齐
当前回答
如果另一列的宽度是固定的，那么如何使用适用于所有常见浏览器的calc CSS函数:
width: calc(100% - 20px) /* 20px being the first column's width */
这样，第二行的宽度将被计算(即剩余宽度)并响应地应用。
其他回答
如果另一列的宽度是固定的，那么如何使用适用于所有常见浏览器的calc CSS函数:
width: calc(100% - 20px) /* 20px being the first column's width */
这样，第二行的宽度将被计算(即剩余宽度)并响应地应用。
我写了一个javascript函数，从jQuery $(document).ready()调用。这将解析父div的所有子div，只更新最右边的子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"));
}
});
});
}
这个问题的解决方法其实很简单，但一点也不明显。你必须触发一个叫做“块格式化上下文”(BFC)的东西，它以特定的方式与浮点数交互。
只需使用第二个div，删除浮动，并将其赋值为overflow:hidden。任何不可见的溢出值都会使它所设置的块成为BFC。bfc不允许后代浮体逃离它们，也不允许兄弟姐妹/祖先浮体入侵它们。这里的净效果是，浮动的div将做它的事情，然后第二个div将是一个普通的块，占用所有可用的宽度，除了浮动占用的宽度。
这应该适用于所有当前的浏览器，尽管你可能必须在IE6和7中触发hasLayout。我想不起来了。
演示:
固定左:http://jsfiddle.net/A8zLY/5/ 固定权限:http://jsfiddle.net/A8zLY/2/
div { 浮:左; ｝ 接着{ 背景:# ccc; 浮:没有; 溢出:隐藏; ｝ < div > < / div >树 < < div class = "第二”>视图/ 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 >
