提问人：deceze 提问时间：8/19/2009 最后编辑：deceze 更新时间：9/22/2012 访问量：7520
CSS：两个字段，左边一个灵活的宽度，右边一个占用剩余空间
CSS: Two fields, left one flexible width, right one takes up remaining space
问：
------------- --------------------------------------------------
| some text | | some more text, sometimes more, sometimes less |
------------- --------------------------------------------------
|<------------------------- 100% width ----------------------->|
所以我有上面的布局。左边的盒子应该尽可能小，而右边的盒子应该占用剩余的空间。这通常可以用 .float: left
问题在于，右边的盒子可以增长很多，而左边的盒子几乎可以保证非常小（但大小各不相同，因此需要灵活）。如果正确的框增长，我需要它的行为如下：
------------- --------------------------------------------------
| some text | | quite a lot of text, actually, really quite a |
------------- | bunch of it, you could say this is really |
| quite a heck of a lot of text |
--------------------------------------------------
如果我使用 ，如果右框包含大量文本，则右框将在左框下方换行：float:left
-------------
| some text | (not good)
-------------
----------------------------------------------------------------
| quite a lot of text, actually, really quite a bunch of it, |
| you could say this is really quite a heck of a lot of text |
----------------------------------------------------------------
如果我对两者都使用表格，如果两者都包含很少的文本，则左侧框可能会不必要地增长：
(not good)
-------------------------------- -------------------------------
| some text | | not that much text |
-------------------------------- -------------------------------
此外，左边的框不应该换行。但是由于它包含一些 HTML 元素，而不仅仅是纯文本，因此似乎不适用于所有浏览器。no-wrap
这个问题的好解决方案是什么？
编辑
实际上，右边的盒子占用剩余的宽度并不是很重要，只是它总是附着在左边盒子的右边。
答：
0赞
Steve Gilham
8/19/2009
#1
定义左列的固定宽度以及 ;把它放在 HTML 中的主列之后float:left
右列有两个 div;外侧的也向左浮动，宽度为 100%，内侧的左边距与左列的宽度相同。
评论
0赞
deceze
8/19/2009
对不起，没有固定的宽度，左列需要灵活。
0赞
peirix
8/19/2009
#2
正如 Stobor 所建议的：试着把左边的盒子放在右边的盒子里
<div id="rightBox">
<div id="leftBox">This text will expand the left box</div>
<div style="float:left">
Content of right box goes here<br>
Breaking even works...
</div>
</div>
CSS格式：
#rightBox {
width: 100%;
background: red;
}
#leftBox {
width: auto;
float: left;
background: blue;
}
对我有用。
评论
0赞
deceze
8/19/2009
所以基本上把两者都放在包装纸里，然后把它们漂浮在外面？对我不起作用，如果右边的框包含很多文本（没有换行符！），它会换行在左边的盒子下面。
0赞
peirix
8/19/2009
啊。明白了。嗯。。那我得尝试其他一些东西。
0赞
paulb
8/19/2009
#3
如果您使用的是纯 css 解决方案，我认为您将不得不为其中一列提供某种宽度限制。它绝对不能像上面建议的那样是百分比吗？
问题是 2 倍。如果浮动一列并赋予另一列 100% 的宽度，因为浮动列已从文档流中删除，则另一列的 100% 宽度是完整的视口宽度（它忽略浮动的 div）。如果在不设置第二个 div 的宽度的情况下同时浮动两者，则 div 将（应该）缩小到其最宽子元素的宽度。W3C 规范可能会有所帮助，尽管它不是最容易阅读的。
您可以随时尝试使用 javascript 读取视口宽度，然后设置列宽，否则我认为您会很挣扎。
评论
0赞
deceze
8/19/2009
我会再玩一会儿，但似乎确实没有 Javascript 就没有解决方案。现在我正在考虑使用一个表格，因为这已经让我非常接近了，并通过 JS 调整左列的宽度。:(
26赞
Miriam Suzanne
8/22/2009
#4
对于正确的盒子，使用而不是浮动。无论有多少内容，这都应该占用剩余的空间而不会低于以下。继续浮动左侧框。overflow: hidden; width: auto;
评论
0赞
deceze
8/22/2009
嘿，我想你在那里做点什么。我不知道是这样工作的。我需要做更多的测试，但这似乎是答案！:)overflow: hidden
2赞
Miriam Suzanne
8/22/2009
我从 stubbornella.org 的妮可·沙利文（Nicole Sullivan）那里学到了它 - 她在那里有更多细节： stubbornella.org/content/2009/07/23/overflow-a-secret-benefit 非常有用。
0赞
deceze
8/26/2009
太棒了，它有效。Ze Frentch 'ave manie a secröt trick.（请原谅我的拙劣模仿;)。
0赞
Cody
9/22/2012
#5
您也可以尝试将包装器显示设置为 table，将子元素设置为 table-cell。然后，您可以将一个 div 的宽度和高度设置为固定像素值，将另一个（动态）div 宽度设置为 100%。
<style>
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#container{
border: solid #222 1px;
width: 400px;
height: 360px;
resize: both;
overflow: auto;
}
#wrap{
border: solid red 1px;
width: 100%;
height: 100%;
display: table;
resize: both;
overflow: auto;
}
video{
border: solid #222 4px;
display: table-cell;
width: 160px;
height: 160px;
}
#list{
border: solid #222 4px;
display: table-cell;
width: 100%;
height: 100%;
}
</style>
<div id="container">
<div id="wrap">
<video controls></video>
<br>
<div id="list"></div>
</div>
</div>
把那只小狗扔进去！
PS：不知道如何垂直执行此操作:(
编辑！！！
垂直： * { -webkit-box-sizing：边框; -moz-box-sizing：边框; box-sizing：边框; }
#container{
border: solid #222 1px;
width: 400px;
height: 360px;
resize: both;
overflow: auto;
}
#wrap{
border: solid red 1px;
width: 100%;
height: 100%;
display: table;
resize: both;
overflow: auto;
}
video{
border: solid #222 4px;
display: table-cell;
width: 160px;
height: 160px;
}
#median{
display: table-row;
width: 100%;
}
#list{
border: solid #222 4px;
display: table-cell;
width: 100%;
height: 100%;
}
</style>
<div id="container">
<div id="wrap">
<video controls></video>
<div id="median"></div>
<div id="list"></div>
</div>
</div>
评论