第八章 CSS实现典型布局(理论).pptVIP

两列式布局——完整代码!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Strict//EN“html head title两列式布局/title style …… /style /head body divid=divLayout divid=divNav/div divid=divContent/div /div /body/html#divLayout{ border:1pxdashedblue; width:560px; margin:0pxauto;}#divNav{ border:1pxsolidgray; width:200px; height:320px; float:left;}#divContent{ border:1pxsolidgray; height:320px; }演示例8-10三列式布局divid=divLayout divid=divNav/div divid=divContent/div divid=divSide/div/div#divLayout{ border:1pxdashedgreen; width:960px;}#divNav,#divContent,#divSide{ border:1pxsolidgray; height:200px;}#divNav{ width:180px;}#divSide{ width:220px; }现场编程参考8.3.3节如果使用浮动float实现三个内部div的定位，则divConent无法实现宽度自适应。改用绝对定位absolute三列式布局——中间列宽度自适应#divLayout{ position:absolute; width:960px; border:1pxdashedgreen;}#divNav{ width:180px; position:absolute; left:10px;top:0px;}#divSide{ width:220px; position:absolute; right:10px;top:0px;}现场编程参考8.3.3节此时，中间的divContent的宽度是它所在的容器divLayout宽度的百分之百，与期望不符。三列式布局——中间列宽度自适应#divContent{ margin-left:202px; margin-right:242px;}使用左右外边距控制位置。怎么算出来的？#divLayout{ position:absolute; width:960px; border:1pxdashedgreen;}#divNav{ width:180px; position:absolute; left:10px;top:0px;}#divSide{ width:220px; position:absolute; right:10px;top:0px;}现场编程参考8.3.3节三列式布局——完整代码!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Strict//ENhtml head title三列式布局/title style …… /style /head body divid=divLayout divid=divNavdivNav/div divid=divContentdivContent/div divid=divSidedivSide/div /div /body/html#divLayout{ position:absolute; width:85%;/*width:960px;*/ border:1pxdashedgreen;}#divNav,#divContent,#divSide{ border:1pxsolidgray; height:200px;}#divNav{ width:180px; position:absolute; left:10px;top:0px;}#divSide{ width:220px; position:absolute; right:10px;top:0px;} #divContent{ margin-left:202px; margin-right:242px;}演示例8-