一侧定宽,一侧自适应的页面布局在现在用的很多,有哪些实现方式呢?
1,通过浮动和margin取正值来实现:
定宽的元素为#sidebar
自适应的元素为#content
css代码如下:
给定宽的元素设置浮动
#sidebar{
float:left;
width:200px; height:600px;
background-color:red;
}
自适应的元素呢?来给他设置margin-left吧,取值比上面那个元素的宽度大一些就好
#content{
width:100%; //如果是div块级元素的话,width不设也可以
height:600px;
margin-left: 210px;
background-color:black;
}
2,通过浮动和margin取负值来实现:
定宽的元素为#sidebar
自适应的元素为#content
css代码如下:
#content{
float:left;
width:100%;
height:600px;
margin-right:-200px;
background-color:black;
}
#sidebar{
float:left;
width:200px;
height:600px;
background-color:red;
}