2010-04-01

后端开发工程师的DIV+CSS两栏布局入门

Views: 12017 | Add Comments

padding 导致 width 扩大

如果对一个元素同时指定了 width 和 padding, 那么它实际的宽度是 padding-left + padding-right + width, 所以, 设置了固定宽度的 div, padding 必须设置为 0, 否则, 宽度便不是所期望的.

div 如何居中?

设置比例宽度或者固定宽度, 然后 margin-left 和 margin-right 为 auto.

<div class="main">
</div>

.main{
	margin: 0 auto;
	width: 800px;
	border: 1px solid #666;
}

居中的 div 如何自适应高度?

当 div 内的元素 float 时, div 无法自适应高度. 给 div 增加一个 100% 宽度的子 div, 所有内容放到该子 div 里:

<div class="main">
	<div class="main_inner">
	</div>
</div>

.main{
	margin: 0 auto;
	width: 800px;
}

.main_inner{
	float: left;
	width: 100%;
	border: 1px solid #666;
}

这样, main 也没有自适应高度, 但新增加的 main 自适应高度了, 宽度也能固定, 也就是 main 的宽度. main 的作用只有居中和宽度的功能. 也就是说, 用两个 div 来配合, 一个实现高度, 一个实现宽度.

如何进行两栏布局?

正确设置宽度, 是进行两栏布局的关键. 把两栏放在上面提到的 main 里.

1. 两栏固定宽度或者比例宽度, 然后 float

<div class="main">
	<div class="col_1">
	</div>

	<div class="col_2">
	</div>
</div>

.col_1{
	float: left;
	width: 400px;
}

.col_2{
	float: right;
	width: 400px;
}

float左还右均可, 随你喜欢. 非常推荐这种布局方式, 因为只需要修改一两行CSS代码, 就能改变两栏的左右关系.

2. 一栏固定宽度 float, 另一栏 margin

<div class="main">
	<div class="col_1">
	</div>

	<div class="col_2">
	</div>
</div>

.col_1{
	float: left;
	width: 400px;
}

.col_2{
	margin-left: 400px;
}

当 main 不是固定宽度时, 使用此方法.

用比例宽度来设置两栏有什么不好?

当两栏所处的容器不是固定宽度时, 一般会用比例宽度来设置两栏, 但这种方式适应性非常差, 受 border, margin, padding 的影响, 所以两者的宽度和一般不是 100%. 当浏览器窗口小时, 两栏间距很紧, 当浏览器窗口放大时, 两栏又离得太远. 一旦不小心设置了 border, margin, padding, 其中一个便会溜到另一个的下方, 好像消失了一样.

如果确实需要两栏占满整个浏览器窗口, 最好使用前面提到的"一栏固定宽度 float, 另一栏 margin"方法.

Related posts:

  1. 用Javascript生成弹出窗口
  2. 高性能并发网络服务器设计与实现
  3. SSDB 入门基础 PPT
  4. SSDB(LevelDB 服务器) PPT
  5. [转]一个叫做家的地方
Posted by ideawu at 2010-04-01 14:34:13

Leave a Comment