div+css布局漫谈1.CSS布局常用的方法：float ： none | left | right取值：none ： 默认值。对象不飘浮left ： 文本流向对象的右边right ： 文本流向对象的左边 它是如何工作的，看个一行两列的例子 xhtml：
这里是第一列
这里是第二列
CSS： #wrap{ width：100%； height：auto；} #column1{ float：left； width：40%；} #column2{ float：right； width：60%；}。clear{ clear：both；} position ： static | absolute | fixed | relative 取值： static ： 默认值。无特殊定位，对象遵循HTML定位规则absolute ： 把对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据 body 对象。而其层叠通过 z-index 属性定义fixed ： 未支持。对象定位遵从绝对（absolute）方式。但是要遵守一些规范relative ： 对象不可层叠，但把依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置 它来实现一行两列的例子 xhtml：
这里是第一列
这里是第二列 CSS： #wrap{ position：relative；/*相对定位*/width：770px；} #column1{ position：absolute； top：0； left：0； width：300px；} #column2{position：absolute； top：0； right：0； width：470px；} 他们的区别在哪？ 显然，float是相对定位的，会随着浏览器的大小和分辨率的变化而改变，而position就不行了，所以一般情况下还是float布局！ 2.CSS常用布局实例 一列单行一列 body { margin： 0px； padding： 0px； text-align： center； } #content { margin-left：auto； margin-right：auto； width： 400px； width： 370px； } 两行一列 body { margin： 0px； padding： 0px； text-align： center；} #content-top { margin-left：auto； margin-right：auto； width： 400px； width： 370px；} #content-end {margin-left：auto； margin-right：auto； width： 400px； width： 370px；} 三行一列 body { margin： 0px； padding： 0px； text-align： center； } #content-top { margin-left：auto； margin-right：auto； width： 400px； width： 370px； } #content-mid { margin-left：auto； margin-right：auto； width： 400px； width： 370px； } #content-end { margin-left：auto； margin-right：auto； width： 400px； width： 370px； } 两列单行两列 #bodycenter { width： 700px；margin-right： auto； margin-left： auto；overflow： auto； } #bodycenter #dv1 {float： left；width： 280px；} #bodycenter #dv2 {float： right；width： 410px；} 两行两列 #header{ width： 700px； margin-right： auto；margin-left： auto； overflow： auto；} #bodycenter { width： 700px； margin-right： auto； margin-left： auto； overflow： auto； } #bodycenter #dv1 { float： left； width： 280px；} #bodycenter #dv2 { float： right；width： 410px；} 三行两列 #header{ width： 700px；margin-right： auto； margin-left： auto； } #bodycenter {width： 700px； margin-right： auto； margin-left： auto； } #bodycenter #dv1 { float： left；width： 280px；} #bodycenter #dv2 { float： right； width： 410px；} #footer{ width： 700px； margin-right： auto； margin-left： auto； overflow： auto； } 三列单行三列绝对定位 #left { position： absolute； top： 0px； left： 0px； width： 120px； } #middle {margin： 20px 190px 20px 190px； } #right {position： absolute；top： 0px； right： 0px； width： 120px；} float定位 xhtml：
这里是第一列
这里是第二列
这里是第三列
CSS： #wrap{ width：100%； height：auto；} #column{ float：left； width：60%；} #column1{ float：left； width：30%；} #column2{ float：right； width：30%；} #column3{ float：right； width：40%；}。clear{ clear：both；} float定位二 xhtml：
This is the main content.上一篇： 针对浏览器隐藏CSS之九大技巧 下一篇： 使用 CSS 创建固定宽度的布局 更多相关文章
|
推荐文章
|
