问题描述
|
我想使用DIV进行两列布局,其中右列将具有200px的固定宽度,而左列将占用剩余的所有空间。
如果使用表格,这非常简单:
<table width=\"100%\">
<tr>
<td>Column 1</td>
<td width=\"200\">Column 2 (always 200px)</td>
</tr>
</table>
但是DIV呢?有可能做到这一点吗?如果是,那怎么办?
解决方法
以下示例是按源顺序排序的,即HTML源中的第1列出现在第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>
,这是一个解决方案(它有一些奇怪之处,但是如果您注意到它们并且它们是一个问题,请告诉我):
<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解决方案
#left{
float:right;
width:200px;
height:500px;
background:red;
}
#right{
margin-right: 200px;
height:500px;
background:blue;
}
在http://jsfiddle.net/NP4vb/3/查看工作示例
jQuery解决方案
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(用于三列布局)。
很抱歉有这么多链接到此伙计们的网站,但我认为这是一个很棒的资源。
,我认为这是一个简单的答案,这将根据父级宽度将子级dev分别拆分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>