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




 div {
  float: left;
}

.second {
  background: #ccc;
} 

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





我希望'view'div扩展到'tree'div填充所需空间后的整个宽度。

当前，我的'view'将div调整大小以使其包含的内容
如果两个div都占据整个高度，这也是很好的。


不重复声明：



设置float：left时将div扩展到最大宽度
，因为左侧的宽度固定。

帮助div-使div适合剩余宽度
因为我需要两列都左对齐


评论

相关stackoverflow.com/a/22719552/759452
我不明白这个问题，或者我不明白您如何选择接受的答案，因为宽度和高度都固定了，但隐藏了溢出的不便之处

#1 楼

解决这个问题的方法实际上非常简单，但一点也不明显。您必须触发一种称为“块格式设置上下文”（BFC）的东西，它以特定方式与浮点数交互。

只取第二个div，删除该浮点数，然后给它overflow:hidden即可。除可见之外的任何溢出值都会使它设置的块成为BFC。 BFC不允许子代浮动对象逃脱它们，也不允许同级/祖先浮动对象侵入它们。最终的效果是，浮动div将执行其操作，然后第二个div将是一个普通块，占用浮动块占用的所有可用宽度。

这应该适用于所有当前浏览器，尽管您可能必须在IE6和7中触发hasLayout。我不记得了。

Demos：


固定左：http：// jsfiddle .net / A8zLY / 5 /

固定右：http://jsfiddle.net/A8zLY/2/



评论

很好的答案！但是，当您说“除auto以外的任何溢出值”将其设为BFC时，您错了。您的意思是除默认值（可见）以外的任何溢出值都将使其变为BFC。实际上，溢出自动也可以完美工作-这就是我的建议（以防万一您确实有相对定位的元素可能会从该div中窥视）。

– B T
11年5月28日在18:33
这篇文章有一个很好的解释：colinaarts.com/articles/the-magic-of-overflow-hidden

–马克斯·康托
2011-10-20 18:53
如果内容足够大以致div溢出怎么办？

–詹尼斯·克里斯托法基斯
2012年1月29日17:05
重要的是要注意，孩子的顺序很重要。具有固定宽度的浮动元素必须在另一个之上。花了我很长时间才弄清楚，为什么它对切换顺序不起作用。

– Riplexus
2015年10月12日在11:46
我写了一个答案，根据大卫和鲍里斯（David and Boris）给出的回答，解释了为什么一切不可见的溢出会触发BFC，可以在以下位置找到：stackoverflow.com/questions/9943503 / ...我的解释正确吗？

– BoltClock♦
15年11月18日在16:29

#2 楼

我刚刚发现了弹性盒的魔力（显示：弹性）。尝试以下操作：

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


弹性盒给了我希望CSS拥有15年的控制权。它终于在这里！更多信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

评论

我不知道您发现了什么，但是您的代码在最新的Chrome jsfiddle.net/fjb548kw/3中无法正常工作

–叶夫根尼·阿凡纳西耶夫（Yevgeniy Afanasyev）
18年8月11日在3:23
@YevgeniyAfanasyev我删除了“ float：left;”解决该问题。感谢您的来信！

– B T
18年8月13日在22:44
谢谢。您能解释一下为什么会有弹性增长吗？100；而不是flex-grow：1 ;?

–叶夫根尼·阿凡纳西耶夫（Yevgeniy Afanasyev）
18年8月14日下午5:01
@YevgeniyAfanasyev没有特别的原因，除了那就是我喜欢这样做的方式。它可以让我以百分比为单位进行思考，因此，如果我可以将#a设置为flex-grow：10，然后将#b设置为flex-grow：90，那么#a将是线宽的10％，而＃ b将是线宽的90％。如果没有其他元素具有可弯曲宽度样式，那么从技术上讲，您放置什么都没有关系。

– B T
18年8月14日在23:41
这对我来说效果最好，尝试将输入和按钮并排放置，就好像它们是一个。

– Souleste
2月7日下午22:35

#3 楼

使用CSS Flexbox flex-grow属性可实现此目的。



 html, body {
  height: 100%;
}
body {
  display: flex;
}
.second {
  flex-grow: 1;
} 

 <div style="background: #bef;">Tree</div>
<div class="second" style="background: #ff9;">View</div>




#4 楼

这将是一个很好的例子，它与表无关紧要，而对于CSS来说（如果不是不可能的话，至少是跨浏览器的话）很难。

如果两列都是固定宽度，这很容易。

如果其中一列是固定宽度，这会稍微困难一些，但完全可行。

两列宽度都可变，恕我直言，只需使用两列表格即可。

评论

在响应式设计中，Table并不是一个很好的选择，在这种设计中，您希望右侧列在小型设备上滑到左侧下方。

– S ..
2014年3月21日在22:35
有一些使用表的响应设计技巧：css-tricks.com/response-data-tables

– Rikki
2015年5月2日，14：32
我现在倾向于经常完全设计两个单独的布局，并使用媒体查询和显示在移动设备上进行更改：尽管在滑动范围内尽可能地提高100％的响应速度，但有时最好还是完全利用触摸屏的触感和按钮样式为移动设备更改设计。

–比桑德
2015年9月2日于13:20

#5 楼

检查此解决方案




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




评论

这通常是一种出色的解决方案，因为并不总是希望隐藏溢出。

–约瑟夫·伦诺克斯（Joseph Lennox）
2014年12月17日，23:04
每个OP：“我想要一个两列的div布局，其中每个布局可以具有可变的宽度”。在您的答案中，您必须知道第一列的宽度，因此它不是可变的。您最好在两列上都设置固定宽度，然后将它们浮动。

–雅各布
2015年11月25日在21:06

#6 楼

使用calc：




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





问题是必须显式定义所有宽度，要么作为值（px和em工作正常），要么作为显式定义自身的百分比。 >

#7 楼

在这里，这可能会有所帮助... 




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




评论

+1是因为您的示例似乎可行，但是在我的实际场景中，由于“树” div不是100％，所以某些情况下“视图”中的内容如何爬行到“树” div中，可能是一些JavaScript强制将其变小并且在树的高度之后看阅览内容

–阿努拉格（Anurag Uniyal）
09年8月12日在6:21
在这种情况下，如果您知道左列的最大宽度，则可以给它一种样式最大宽度（在IE中不起作用），也可以考虑使用margin-left（当心IE上的双重利润错误）或向左填充。

–a6hi5h3k
09年8月15日，1：13
太好了！我将其作为一次性解决方案在线使用：


–ajwest
2015年3月10日23:55

#8 楼

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

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


这样第二行的宽度将是计算（即剩余宽度）并相应地应用。

评论

就使用flexbox以外的其他方式（例如css-grid）而言，这是最好的答案。也适用于位置：固定，这使它成为完美的选择！谢谢！

– Bartekus
1月10日22:46

#9 楼

我不明白为什么人们会如此努力地为使用旧的TABLE标签的简单列式布局找到纯CSS解决方案，如此简单。

所有浏览器仍然具有表布局逻辑...也许叫我恐龙，但我说让它对您有帮助。




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





跨浏览器兼容性方面的风险也要低得多。

评论

是的，但是如果css正在进行所有操作，为什么不这样做呢？至少可以好奇吗？

–阿努拉格（Anurag Uniyal）
2010-12-09 14:46
这是因为如果要在小型设备中放置媒体查询以将两列都放在另一列上，则使用旧表标记是不可能的。要使此工作正常，您需要应用CSS表格样式。因此，如今，如果您想要针对任何屏幕尺寸的自适应布局，最好使用CSS解决此问题。

– ElChiniNet
17-6-27 at 10:42


#10 楼




 <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="Colum­nOne­Half">Tree</div>
    <div class="Colum­nOne­Half">View</div>
  </div>

</body>

</html>




评论

我想要一个状态栏，左边有固定的项目，右边有固定的项目，并且有一条消息行使用所有剩余的剩余空间。我从这个答案开始，并在浮点数之后添加了div消息：height：20px;空白：nowrap;溢出：隐藏；文字溢出：剪辑

– englebart
17年8月14日在20:15

#11 楼

您可以尝试CSS网格布局。




 dl {
  display: grid;
  grid-template-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>




#12 楼

flex-grow-定义弹性项目在必要时增长的能力。它接受作为比例的无单位值。它决定了该项目应在flex容器内占用多少可用空间。

如果所有项目的flex-grow设置为1，则容器中的剩余空间将平均分配给所有子项。如果其中一个孩子的值为2，则剩余空间将占其他孩子的两倍（或者至少会尝试）。在此处查看更多信息




 .parent {
  display: flex;
}

.child {
  flex-grow: 1; // It accepts a unitless value that serves as a proportion
}

.left {
  background: red;
}

.right {
  background: green;
} 

 <div class="parent"> 
  <div class="child left">
      Left 50%
  </div>
   <div class="child right">
      Right 50%
  </div>
</div>




#13 楼

一个稍微不同的实现，如果不存在content panel，则两个div面板（内容+额外）并排扩展了extra panel。

jsfiddle：http：// jsfiddle。净/ qLTMf / 1722 /

#14 楼

帕特-你说得对。这就是为什么该解决方案可以满足“恐龙”和同时代人的原因。 :) 




 .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%;
} 

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




评论

没有css类.ip的html参考，它在IE7中不起作用

– Keith K
2011年6月2日7:45


#15 楼

您可以使用W3的CSS库，该库包含一个名为rest的类，该类可以执行以下操作：




 <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

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





不要忘记在页面的header中链接CSS库：

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">


这里是官方演示：W3学校Tryit编辑器

评论

看起来只是添加了“溢出：隐藏”，这使它已经给出的答案更糟了。

–vpzomtrrfrt
3月24日19:13

#16 楼

我不确定这是否是您所期望的答案，但是为什么不将Tree的宽度设置为“ auto”，而将“ View”的宽度设置为100％？

评论

因为那太宽，会使第二个浮点数低于第一个浮点数。

–cletus
09年8月11日在12:50

#17 楼

看一下可用的CSS布局框架。我建议使用Simpl或稍微复杂一些的Blueprint框架。

如果您使用的是Simpl（仅导入一个simpl.css文件），则可以执行以下操作：

<div class="Colum­nOne­Half">Tree</div>
<div class="Colum­nOne­Half">View</div>


，用于50-50布局，或者：

<div class="Colum­nOne­Quarter">Tree</div>
<div class="Colum­nThreeQuarters">View</div>


，用于25-75的布局。

就这么简单。

评论

两列都将可变宽度吗？

–阿努拉格（Anurag Uniyal）
09年8月12日在6:00

#18 楼

感谢您插入Simpl.css！

请记住将所有列都包裹在ColumnWrapper中。

<div class="ColumnWrapper">
    <div class="Colum­nOne­Half">Tree</div>
    <div class="Colum­nOne­Half">View</div>
</div>


我要发布Simpl.css的1.0版，所以有助于传播！！

#19 楼

我编写了一个从jQuery $（document）.ready（）调用的javascript函数。这将解析父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"));
            }
        });
    });
}


#20 楼

使用flexbox相当容易。请参见下面的代码段。我添加了一个包装容器来控制流量并设置全局高度。还添加了边框以标识元素。请注意，现在div也可以根据需要扩展到全高。
在现实世界中，应该在flexbox中使用供应商前缀，因为尚未完全支持。

我已经开发了一个免费的工具，可以使用flexbox了解和设计布局。在此处查看：
http://algid.com/Flex-Designer 




 .container{
    height:180px;
    border:3px solid #00f;
    display:flex;
    align-items:stretch;
}
div {
    display:flex;
    border:3px solid #0f0;
}
.second {
    display:flex;
    flex-grow:1;
    border:3px solid #f00;
} 

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




评论

在添加答案之前，您是否已阅读所有之前的答案？似乎没有...

– Temani Afif
18年8月12日在8:10
附带说明，您无需添加拉伸，因为它是默认值，并且无需将子元素设置为flex容器，因此display：flex对内部元素无用

– Temani Afif
18年8月12日在8:11
我不知道为什么要投反对票，而没有任何评论。这个答案不是对问题的答复吗？为什么？如果尝试帮助他人受到惩罚，我在下一个答案之前会三思而后行，

–马里奥·巴斯克斯（MarioVázquez）
18年8月12日在8:13
投票结束后，您有两个评论，这还不够吗？

– Temani Afif
18年8月12日在8:13


Temari，您检查了我的工具吗？您认为有用吗？可以帮助别人吗？您认为与问题无关吗？您对这个问题的答案在哪里？我看不到您在这里扮演什么角色？

–马里奥·巴斯克斯（MarioVázquez）
18年8月12日在8:16


#21 楼

如果两个宽度都是可变长度，为什么不通过脚本或服务器端计算宽度？

<div style="width: <=% getTreeWidth() %>">Tree</div> 

<div style="width: <=% getViewWidth() %>">View</div>


评论

服务器如何知道客户端的布局引擎如何工作？

–凯夫
09年8月11日在13:07
很简单：为90％的浏览器开发它：) IE 7 +，FF3 +和Safari支持CSS3。您还可以包括标准IE6 <！-[如果是IE 6]>元素。顺便说一句，哪种浏览器不支持style =“ width：％” ??

– amschiefr
09年8月11日13:25
我不知道如何在服务器端完成此操作，但是是的，有些javscript可以做到这一点，但除非CSS / HTML无法做到，否则我想避免这样做

–阿努拉格（Anurag Uniyal）
09年8月12日在5:59
不能。因此，如果您希望两者都是动态的，则必须在脚本或服务器端进行。

– amschiefr
09年8月12日在12:21