1.采用固定宽度
#wrapper{ width:800px; margin:0 auto; background:#999 url(img/1.jpg) repeat-y left top; } #header{ height:100px; background-color:#ccc; } #nav{ width:200px; background-color:#999; float:left; } #content{ float:right; background-color:#362219; } #bigger{ width:390px; padding:10px 20px; float:left; background-color:#063; } #smaller{ width:150px; padding:10px 10px; float:right; background-color:#369; } #footer{ clear:both; background-color:#333; } <div id="wrapper"> <div id="header">header</div> <div id="nav">Direct child ... This is achieved by introducing a new syntax for the selector. Figure 3-20 is an example of a direct child selector. </div> <div id="content"> <div id="bigger">Direct...hildren of the ele-ment. This is achieved by introducing a new syntax for the selector. Figure 3-20 is an example of a direct child selector. </div> <div id="smaller">Direct child selectors operate much like descendant selectors in that they also ...ildren of the ele-ment. This is achieved by introducing a new syntax for the selector. Figure 3-20 is an example of a direct child selector. </div> </div> <div id="footer">foot</div> </div>
2.采用百分比
#wrapper{ width:85%; margin:0 auto; background:#999 url(img/bg.gif) repeat-y 23% 0; } #header{ height:100px; background-color:#ccc; } #nav{ width:23%; /*background-color:#999;*/ float:left; } #content{ width:75%; float:right; background-color:#362219; background:#666 url(img/bg.gif) repeat-y 77% 0; } #bigger{ width:66%; /*padding:10px 20px;*/ float:left; background-color:#063; } #smaller{ width:31%; /*padding:10px 10px;*/ float:right; background-color:#666; } #footer{ clear:both; background-color:#333; } <div id="wrapper"> <div id="header">header</div> <div style="wraper2"> <div id="nav">Direct child selectors ...example of a direct child selector. </div> <div id="content"> <div id="bigger">Direct c...hildren of the ele-ment. This is achieved by introducing a new syntax for the selector. Figure 3-20 is an example of a direct child selector. </div> <div id="smaller">Direct c...selector. Figure 3-20 is an example of a direct child selector. </div> </div> <div> <div id="footer">foot</div> </div>