第 1 页：三列式（中间自适应宽度） 第 2 页：二列式（左侧自适应宽度） 第 3 页：二列式（右侧自适应宽度）
二列式（右侧自适应宽度）
二列式（右侧自适应宽度）布局，原理与第一个相同：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>二列式（右侧自适应宽度）</title> <style type="text/css"> <!-- body { font: normal normal normal 12px/150% Arial, "宋体", Helvetica, sans-serif; } .left, .main { _height:200px; min-height:200px; } .container{ width:650px; background:#f5f5f5; margin:0px auto; } .left { width:150px; float:left; background:#ddd; } .main { margin-left:155px; border:1px solid #333 } .clear { clear:both; height:0; font-size: 0px; line-height: 0px; } --> </style> </head> <body> <h3>.container 的宽度为650px时的效果：</h3> <div class="container"> <div class="left"> <h4>网页左侧内容</h4> 此 div 为网页左侧的内容，由于此元素是浮动的（float:left;），因此必须指定宽度。 </div> <div class="main"> <h4>网页中间内容</h4> 此 div 为网页中间的内容，考虑到中间的宽度将随着整体的缩放而变化，因此不固定宽度，改为缩进值（margin-left:155px;）来实现）。 </div> <div class="clear"></div> 此 div 为中部整体的内容，这里宽度我们设置为650px（width:650px;），背景色设置为灰色（background:#f5f5f5;）。 </div> </div> <h3>.container 的宽度为100%时的效果：</h3> <div class="container" style="width:100%;"> <div class="left"> <h4>网页左侧内容</h4> 此 div 为网页左侧的内容，由于此元素是浮动的（float:left;），因此必须指定宽度。 </div> <div class="main"> <h4>网页中间内容</h4> 此 div 为网页中间的内容，考虑到中间的宽度将随着整体的缩放而变化，因此不固定宽度，改为缩进值（margin-left:155px;）来实现。 </div> <div class="clear"></div> 此 div 为中部整体的内容，这里宽度我们设置为100%（width:<span class="container" style="width:100%;">100</span>%;），背景色设置为灰色（background:#f5f5f5;）。 </div> </div> <h3>有什么收获了吗？</h3> </body> </html> 提示：您可以先修改部分代码再运行
总结：不管是几列式，最好是有一列不浮动，以margin值缩进以保持百分比缩放。另外，在网页结构上，浮动的区块在写在非浮动区块的上方。
Copyright © 2003- PowerEasy Yahu All Rights Reserved.
Power by PowerEasy® SiteFactory™ 4.0 粤ICP备09060397号
