Html 两列 div 布局，左流动，右列固定
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5645986/
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 column div layout with fluid left and fixed right column
提问by Silver Light
I want to make a two column layout using DIVs, where right column will have a fixed width of 200px and the left one would take all the space that is left.
我想使用 DIV 进行两列布局，其中右列的固定宽度为 200px，左列将占用所有剩余空间。
It's quite easy, if you use tables:
如果您使用表格，这很容易：
<table width="100%">
<tr>
<td>Column 1</td>
<td width="200">Column 2 (always 200px)</td>
</tr>
</table>
But how about DIVs? Is it possible to accomplish this? If yes, then how?
但是 DIV 呢？有没有可能做到这一点？如果是，那么如何？
回答by Salman A
The following examples are source ordered i.e. column 1 appears before column 2 in the HTML source. Whether a column appears on left or right is controlled by CSS:
以下示例按源代码排序，即 HTML 源代码中第 1 列出现在第 2 列之前。列是出现在左边还是右边是由 CSS 控制的：
Fixed Right
固定权利
#wrapper {
margin-right: 200px;
}
#content {
float: left;
width: 100%;
background-color: #CCF;
}
#sidebar {
float: right;
width: 200px;
margin-right: -200px;
background-color: #FFA;
}
#cleared {
clear: both;
}<div id="wrapper">
<div id="content">Column 1 (fluid)</div>
<div id="sidebar">Column 2 (fixed)</div>
<div id="cleared"></div>
</div>Fixed Left
固定左
#wrapper {
margin-left: 200px;
}
#content {
float: right;
width: 100%;
background-color: #CCF;
}
#sidebar {
float: left;
width: 200px;
margin-left: -200px;
background-color: #FFA;
}
#cleared {
clear: both;
}<div id="wrapper">
<div id="content">Column 1 (fluid)</div>
<div id="sidebar">Column 2 (fixed)</div>
<div id="cleared"></div>
</div>Alternate solution is to use display: table-cell; which results in equal height columns.
替代解决方案是使用display: table-cell；这导致等高的列。
回答by leetNightshade
Here's a solution (and it has some quirks, but let me know if you notice them and that they're a concern):
这是一个解决方案（它有一些怪癖，但如果您注意到它们并且它们是一个问题，请告诉我）：
<div>
<div style="width:200px;float:left;display:inline-block;">
Hello world
</div>
<div style="margin-left:200px;">
Hello world
</div>
</div>
回答by clairesuzy
CSS:
CSS：
#sidebar {float: right; width: 200px; background: #eee;}
#content {overflow: hidden; background: #dad;}
HTML:
HTML：
<div id="sidebar">I'm 200px wide</div>
<div id="content"> I take up the remaining space <br> and I don't wrap under the right column</div>
The above should work, you can put that code in wrapper if you want the give it width and center it too, overflow:hiddenon the column without a width is the key to getting it to contain, vertically, as in not wrap around the side columns (can be left or right)
上面应该可以工作，如果你想要给它宽度并将其居中，你可以将该代码放在包装器中，overflow:hidden在没有宽度的列上是让它垂直包含的关键，因为不环绕侧列（可以向左或向右）
IE6 mightneed zoom:1set on the #content div too if you need it's support
如果您需要它的支持，IE6可能也需要zoom:1在 #content div 上设置
回答by Hussein
CSS Solutuion
CSS 解决方案
#left{
float:right;
width:200px;
height:500px;
background:red;
}
#right{
margin-right: 200px;
height:500px;
background:blue;
}
Check working example at http://jsfiddle.net/NP4vb/3/
在http://jsfiddle.net/NP4vb/3/检查工作示例
jQuery Solution
jQuery 解决方案
var parentw = $('#parent').width();
var rightw = $('#right').width();
$('#left').width(parentw - rightw);
Check working example http://jsfiddle.net/NP4vb/
回答by Mr Moose
I was recently shown this website for liquid layouts using CSS. http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts(Take a look at the demo pages in the links below).
我最近在这个网站上看到了使用 CSS 的液体布局。 http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts（查看以下链接中的演示页面）。
The author now provides an example for fixed width layouts. Check out; http://matthewjamestaylor.com/blog/how-to-convert-a-liquid-layout-to-fixed-width.
作者现在提供了一个固定宽度布局的例子。查看; http://matthewjamestaylor.com/blog/how-to-convert-a-liquid-layout-to-fixed-width。
This provides the following example(s), http://matthewjamestaylor.com/blog/ultimate-2-column-left-menu-pixels.htm(for two column layout like you are after I think)
这提供了以下示例， http://matthewjamestaylor.com/blog/ultimate-2-column-left-menu-pixels.htm（对于像我想的那样的两列布局）
http://matthewjamestaylor.com/blog/fixed-width-or-liquid-layout.htm(for three column layout).
http://matthewjamestaylor.com/blog/fixed-width-or-liquid-layout.htm（用于三列布局）。
Sorry for so many links to this guys site, but I think it is an AWESOME resource.
抱歉有这么多链接到这个人的网站，但我认为这是一个很棒的资源。
回答by Anju313
I think this is a simple answer , this will split child devs 50% each based on the parent width.
我认为这是一个简单的答案，这将根据父宽度将每个子开发者分成 50%。
<div style="width: 100%">
<div style="width: 50%; float: left; display: inline-block;">
Hello world
</div>
<div style="width: 50%; display: inline-block;">
Hello world
</div>
</div>
回答by Serhii Zghama
#wrapper {
margin-right: 50%;
}
#content {
float: left;
width: 50%;
background-color: #CCF;
}
#sidebar {
float: right;
width: 200px;
margin-right: -200px;
background-color: #FFA;
}
#cleared {
clear: both;
}<div id="wrapper">
<div id="content">Column 1 (fluid)</div>
<div id="sidebar">Column 2 (fixed)</div>
<div id="cleared"></div>
</div>