本文介绍了两列div布局与流体左和固定右列的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想用的DIV,其中右边一栏将有200像素的固定宽度和左边将采取所有剩下的空间做一个两栏布局。
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.
这是很容易,如果你使用的表:
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>
但是DIV怎么样?有可能做到这一点吗?如果是,那么如何?
But how about DIVs? Is it possible to accomplish this? If yes, then how?
推荐答案
以下示例是源序列,即列1出现在HTML源中的第2列之前。左栏或右栏是否由CSS控制:
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:
固定右
#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>
修复左
#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.
这篇关于两列div布局与流体左和固定右列的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!