ID：57121770
大小：442.00 KB
页数：24页
时间：2020-08-01
5、将向左浮动，即流到第1个DIV对象的右侧。使用right时，对象将向右浮动。如果将#divright的float值设置为right，将使得#divright对象浮动到网页的右侧，而#divleft对象由于设置了“float:left”属性而浮动到了网页的左侧，如图所示。DIV常见布局设计2、二列布局结构如果结合margin属性，调整两个布局块之间的距离。在样式#divleft和#divright中添加“margin:10px”，则第2个DIV和第1个DIV之间会保留20px的距离，如图所示。如果没有设置margin属性，则由于设置了“float:lef
6、t”的属性，第2个DIV会紧紧贴着第1个DIV对象。DIV常见布局设计2、二列布局结构（2）二列自适应宽度对于二列式布局方式，除了固定宽度，象表格一样还可以做到自适应宽度。从单列自适应布局中可以看出，将宽度值设定成百分比即可实现自适应。重新定义CSS代码如下：#divleft{margin:10px;float:left;height:150px;width:30%;border:10pxsolid#CCFF00;background-color:#F2FAD1;}#divright{margin:10px;float:right;height:150
7、px;width:50%;border:10pxsolid#00FFCC;background-color:#FFFF00;}DIV常见布局设计2、二列布局结构左栏设置宽度为30%，右栏设置宽度为50%。这种二分法是常见的一种网页布局结构，左侧一般都是导航，右侧是内容，如图所示。DIV常见布局设计2、二列布局结构上面的结构采用百分比宽度，但是没有占满整个浏览器窗口。如果将右栏的宽度设置为70%，那么右栏将被挤到第2行，从而就失去了左右分栏的效果了，如图所示。这个问题的原因是由CSS盒模型引起的。在CSS布局中，一个对象的真实宽度是由对象的宽度、左右填充
8、、左右边框、左右边界相加组成的。因此，左栏的宽度不仅仅是浏览器窗口宽度的30%，还应当加上左右
此文档下载收益归作者所有
