两列div格式，左边是stream体，右边是固定的列
我想使用DIV制作两列布局，其中右列将具有200px的固定宽度，左列将占用剩下的所有空间。
如果你使用表格，这很容易：
<table width="100%"> <tr> <td>Column 1</td> <td width="200">Column 2 (always 200px)</td> </tr> </table> 但是DIV呢？ 有没有可能做到这一点？ 如果是，那么如何？
以下示例是按源sorting的，即列1出现在HTML源代码的第2列之前。 左侧或右侧显示的列是由CSS控制的：
固定的权利
#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>
这里有一个解决scheme（它有一些怪癖，但让我知道，如果你注意到他们，他们是一个问题）：
<div> <div style="width:200px;float:left;display:inline-block;"> Hello world </div> <div style="margin-left:200px;"> Hello world </div> </div>
CSS：
#sidebar {float: right; width: 200px; background: #eee;} #content {overflow: hidden; background: #dad;}
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>
上面的工作，你可以把这个代码放在包装中，如果你想给它的宽度和居中， overflow:hidden在没有宽度的列是让它包含的关键，垂直，因为在不环绕边栏（可以左边或右边）
如果您需要支持，IE6 可能需要在#content div上设置zoom:1
CSS Solutuion
#left{ float:right; width:200px; height:500px; background:red; } #right{ margin-right: 200px; height:500px; background:blue; }
在http://jsfiddle.net/NP4vb/3/查看工作示例;
jQuery解决scheme
var parentw = $('#parent').width(); var rightw = $('#right').width(); $('#left').width(parentw - rightw);
我最近使用CSS显示了这个网站的液体布局。 http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts （看下面的链接中的演示页面）。
作者现在提供了一个固定宽度布局的例子。 查看; http://matthewjamestaylor.com/blog/how-to-convert-a-liquid-layout-to-fixed-width 。
这提供了以下示例， http://matthewjamestaylor.com/blog/ultimate-2-column-left-menu-pixels.htm （对于两列布局，就像我想的那样）
http://matthewjamestaylor.com/blog/fixed-width-or-liquid-layout.htm （三列布局）。
对不起，这家伙网站的这么多的链接，但我认为这是一个AWESOME资源。
我认为这是一个简单的答案，这将根据父宽度将每个子开发者分成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>
#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>
