十天学会DIV+CSS第三天笔记
2012-02-04 11:47
429 查看
二列自适应宽度:
#side1 {
width:120px;
height:300px;
float:left;
}
#side2 {
height:300px;
margin-left:120px;
}
两列固定宽度:只需要把上面那个例子side2加个宽度就行了
两列固定宽度居中,在side1和side2上套一个div,然后设置div的margin:0 auto;
float属性:在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素;且要指明一个宽度,否则它会尽可能地窄;另外当可供浮动的空间小于浮动元素时,它会跑到下一行,直到拥有足够放下它的空间。
三列自适应宽度:
#side1 {
width:120px;
height:300px;
float:left;
}
#side2 {
width:120px;
height:300px;
float:right;
}
#main {
height:300px;
}
<div id = "side1"></div>
<div id = "side2"></div>
<div id = "main"></div>
<!--注意,三个div的顺序不能变-->
三列固定宽度:在上一个例子的基础上外套一个div并指定宽度就行了
ie6的3像素bug:当浮动元素与非浮动元素相邻时,这个3像素的Bug就会出现
解决方法是,在#side1里加上_margin-right:-3px;
*注 _只能在IE6下识别
#side1 {
width:120px;
height:300px;
float:left;
}
#side2 {
height:300px;
margin-left:120px;
}
两列固定宽度:只需要把上面那个例子side2加个宽度就行了
两列固定宽度居中,在side1和side2上套一个div,然后设置div的margin:0 auto;
float属性:在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素;且要指明一个宽度,否则它会尽可能地窄;另外当可供浮动的空间小于浮动元素时,它会跑到下一行,直到拥有足够放下它的空间。
三列自适应宽度:
#side1 {
width:120px;
height:300px;
float:left;
}
#side2 {
width:120px;
height:300px;
float:right;
}
#main {
height:300px;
}
<div id = "side1"></div>
<div id = "side2"></div>
<div id = "main"></div>
<!--注意,三个div的顺序不能变-->
三列固定宽度:在上一个例子的基础上外套一个div并指定宽度就行了
ie6的3像素bug:当浮动元素与非浮动元素相邻时,这个3像素的Bug就会出现
解决方法是,在#side1里加上_margin-right:-3px;
*注 _只能在IE6下识别
相关文章推荐
- 十天学会DIV+CSS第一天笔记
- 十天学会DIV+CSS第二天笔记
- 《十天学会web标准(div+css)》学习笔记
- 十天学会Div+CSS第三天之【二列和三列布局】
- 十天学会DIV+CSS(DIV布局)
- 十天学会web标准(DIV+CSS)系列(六)html列表
- 《十天学会web标准(div+css)》之第五天
- 十天学会web标准(DIV+CSS)系列(七)横向导航菜单
- 《十天学会web标准(div+css)》之第六天
- 十天学会web标准(DIV+CSS)系列(一)XHTML CSS基础知识
- 十天学会web标准(DIV+CSS)系列(八)下拉及多级弹出菜单
- 《十天学会web标准(div+css)》之第七天 横向菜单
- 【div+css】十天学会div+css---第一天
- 十天学会web标准(DIV+CSS)
- 十天学会DIV+CSS教程
- 十天学会web标准(DIV+CSS)系列(九)CSS表单设计
- 《十天学会web标准(div+css)》之第八天:下拉及多级弹出菜单
- div+css学习笔记(十天学会div+css)
- DIV+CSS专题:十天学会DIV+CSS
- 十天学会web标准(DIV+CSS)系列(二)一列布局