<!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=gb2312" /> <title>CSS布局入门,二列右列宽自适应</title> <style> body{ margin:0 } #top{ background-color:blue; height:100px; text-align:center } #left{ background-color:#cccccc; border:2px solid #333333; width:100px; height:400px; float:left; } #right{ background-color:#cccccc; border:2px solid #333333; height:400px; } #buttom{ background-color:green; height:100px; } </style> </head> <body> <div id="top">顶部</div> <div id="left">左列</div> <div id="right">右列</div> <div id = "buttom">下面-居中</div> </body> </html>