两列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); 

检查工作示例http://jsfiddle.net/NP4vb/

我最近使用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>