(1)一列固定宽度
#layut {
border: 2px solid #A9C9E2;
background-color: #E8F5FE;
height: 200px;
width: 300px;
}
(2)一列自适应宽度
#layout {
border: 2px solid #A9C9E2;
background-color: #E8F5FE;
height: 200px;
width: 80%;
}
(3)一列固定宽度居中
#layout {
border: 2px solid #A9C9E2;
background-color: #E8F5FE;
height: 200px;
width: 300px;
margin:0px auto;
}
说明:margin属性用于控制对象的上、右、下、左四个方向的外边距,当margin使用两个参数时,第一个参数表示上下边距,第二个参数表示左右边距。除了直接使用数值之外,margin还支持一个值叫auto,auto值是让浏览器自动判断边距,在这里,我们给当前div的左右边距设置为auto,浏览器就会将div的左右边距设为相当,并呈现为居中状态,从而实现了局中效果。
(4)二列固定宽度
<div id="left">左列</div>
<div id="right">右列</div>
<style type="text/css">
<!--
#left {
background-color: #E8F5FE;
border: 1px solid #A9C9E2;
float: left;
height: 300px;
width: 200px;
}
#right {
background-color: #F2FDDB;
border: 1px solid #A5CF3D;
float: left;
height: 300px;
width: 200px;
}
-->
</style>
说明:float属性是CSS布局中非常重要的一个属性,用于控制对象的浮动布局方式,我们的大部分div布局基本上都通过float的控制来实现布局,float的可选参数为:none/left/right。
float使用none值时表示对象不浮动,而使用left时,对象将向左浮动,例如本例中的div使用了float:left;之后,右侧的内容将流到当前对象的右侧。使用right时,对象将向右浮动,如果将#left的float值设置为right,将使得#left对象浮动到网页右侧,而#right对象则由于float:left;属性浮动到网页左侧。
(5)二列宽度自适应
#left {
background-color: #E8F5FE;
border: 1px solid #A9C9E2;
float: left;
height: 300px;
width: 20%;
}
#right {
background-color: #F2FDDB;
border: 1px solid #A5CF3D;
float: left;
height: 300px;
width: 70%;
}
说明:在CSS布局中,一个对象的宽度,不仅仅由width值来决定,一个对象的真实宽度是由对象本身的宽、对象的左右边距,以及左右边框,还有内边距这些属性相加而成,因此左面的对象不仅仅是浏览器窗口的20%的宽度,还应该加上左边的边框的宽度。这样算下来左右栏都超出了自身的百分比宽度,最终的宽度也超过了浏览器窗口的宽度,因此右栏将被挤掉第二行显示,从而失去了左右分栏的效果,因此这里使用了并非100%的宽度之和,而在实际应用之中,可以通过避免边框及边距的使用,而达到左右与浏览器填满的效果。