Html 两个浮动列 - 一个固定的，一个松散的宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4676442/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Two floated columns - one fixed, one loose width
提问by MacMac
I've looked around SO, but I cannot find one that matches my occurrence, I basically have two columns one fixed width (185px) and the other column has no fixed width, however I need the last column to fill the last space, e.g.
我环顾四周SO，但找不到与我出现的情况相匹配的，我基本上有两列，宽度固定（185px），另一列没有固定宽度，但是我需要最后一列来填充最后一个空间，例如
...........................................
.--------- ------------------------------.
.+ + + +.
.+ + + +.
.+ + + +.
.+ + + +.
.+ + ------------------------------.
.+ + .
.+ + .
.+ + .
.--------- .
...........................................
The first column should always be 100% to the bottom when the second column fills the remaining width, they both are floated left, if I resize the browser window, the second column shows under the first column. I need the second column to fill the remaining width and be flexible when resizing the browser window.
当第二列填充剩余宽度时，第一列应始终为 100% 到底部，它们都是浮动的left，如果我调整浏览器窗口的大小，第二列显示在第一列下方。我需要第二列来填充剩余的宽度，并且在调整浏览器窗口大小时要灵活。
采纳答案by Zomxilla
Have a look at this. There aren't any demos, but I've used tutorials from this guy before so I assume it works fine. I gather from the article that the main content is liquid. The side content may also be liquid, but I think you can just give it a fixed width and leave it at that. The trick here is to place the main content first.
看看这个。没有任何演示，但我以前使用过这个人的教程，所以我认为它工作正常。我从文章中了解到主要内容是液体。侧面内容也可能是液体，但我认为你可以给它一个固定的宽度并保持不变。这里的技巧是首先放置主要内容。
回答by Jacob
There's actually an easier way to do it than using floats:
实际上有一种比使用浮点数更简单的方法：
.container {
position: relative;
}
.left {
width: 185px;
position: absolute;
top: 0;
left: 0;
}
.right {
margin-left: 185px;
}
回答by Stano
By using negative margins from this tutorialthe CSS can look as follows
html, body, .container {
height:100%;
padding:0;
margin:0;
}
.container {
min-width: 300px;
}
.left {
float:left;
width: 185px;
margin-right: -185px;
height:100%;
}
.right {
margin-left:185px;
}
回答by Gerard Banasig
Edited the solution, this time using flexbox, made the left column fixed using flex: 185px 0 0;then made the right column auto grow using flex-grow:1
编辑了解决方案，这次使用 flexbox，使用固定左列flex: 185px 0 0;然后使用右列自动增长flex-grow:1
*{
box-sizing: border-box;
}
body{
padding:0;
margin:0;
}
#container{
display:flex;
}
#left{
height: 100vh;
flex: 185px 0 0;
background-color:tomato;
}
#right{
flex-grow: 1;
}
#right > div{
background:pink;
} <body>
<div id="container">
<div id="left"> Left </div>
<div id="right">
<div>
Right <br/>
dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf
</div>
</div>
</div>
</body>回答by Delgado Bonito
The "position: absolute;" answer is pretty good, but it has cross-browser implications, especially if you're developing for IE. The best way to accomplish this is the following:
“位置：绝对；” 答案非常好，但它具有跨浏览器的含义，特别是如果您正在为 IE 开发。实现此目的的最佳方法如下：
<html>
<head>
<style>
div.right {
float: right;
width: 200px;
}
div.left {
margin-right: 200px;
}
div.clear {
clear: both;
}
</style>
</head>
<body>
<div class="right"><!--your code here--></div>
<div class="left"><!--your code here--></div>
<div class="clear"></div>
</body>
</html>
Please note that the div you require on the right side is called first in the HTML. Also, note the clearing of the float after the columns, which will come in handy if you have content below, or if there is a parent container.
请注意，您需要在右侧的 div 在 HTML 中首先被调用。另外，请注意在列之后清除浮动，如果您在下面有内容，或者如果有父容器，这将派上用场。
回答by Sebastian
If you don't want to use neither floats nor absolute positioning, the easiest I could come up with was
如果你既不想使用浮动也不想使用绝对定位，我能想到的最简单的方法是
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
white-space: nowrap;
}
div.left {
display: inline-block;
width: 200px;
white-space: normal;
background-color: red;
vertical-align: top;
}
div.right {
display: inline-block;
white-space: normal;
background-color: green;
}
</style>
<title></title>
</head>
<body>
<div class="left">
left
</div>
<div class="right">
right
</div>
</body>
</html>
回答by Andrew Surdu
Well, approved answer ia a good one, but for those that are searching for more here is a link. Hope you find this useful. ;)
好吧，批准的答案是一个很好的答案，但对于那些正在寻找更多内容的人，这里有一个链接。希望您觉得这个有帮助。;)
回答by Mars Mellow
I had tried almost all of the above solution until i stumbled upon this, and it works wonderfully for me. How to make a div to fill a remaining horizontal space (a very simple but annoying problem for CSS experts)
我已经尝试了几乎所有上述解决方案，直到我偶然发现了这一点，它对我来说非常有效。如何制作一个 div 来填充剩余的水平空间（一个非常简单但对 CSS 专家来说很烦人的问题）
Not sure why, it seems you only need to float the column that has fixed width. The rest just fall in to place.
不知道为什么，似乎您只需要浮动具有固定宽度的列。其余的就到位了。
