上次一个朋友问的两列布局，半天没搞定，其实他的html没写好，当然我写的也不咋样，哈哈，今天有空再做一个两列布局，参考糯米团的样子:
html:
<!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" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>两列布局实例</title> <link rel="stylesheet" href="./style.csss" /> </head> <body> <div id="contianer"> <div class="row fix"> <div class="each-film"> <img src="./film-one.jpg" alt="filem-one" width="320" height="195"/> <div class="film-info"> <h2>[2店通用]XX影城</h2> <span>单人影票！可升级套餐，黄金大片，超强视听感觉，惊爆你的眼球！</span> </div> </div> <div class="each-film"> <img src="./film-two.jpg" alt="filem-one" width="320" height="195"/> <div class="film-info"> <h2>[2店通用]XX影城</h2> <span>单人影票！可升级套餐，黄金大片，超强视听感觉，惊爆你的眼球！</span> </div> </div> </div> <div class="row fix"> <div class="each-film"> <img src="./film-one.jpg" alt="filem-one" width="320" height="195"/> <div class="film-info"> <h2>[2店通用]XX影城</h2> <span>单人影票！可升级套餐，黄金大片，超强视听感觉，惊爆你的眼球！</span> </div> </div> <div class="each-film"> <img src="./film-two.jpg" alt="filem-one" width="320" height="195"/> <div class="film-info"> <h2>[2店通用]XX影城</h2> <span>单人影票！可升级套餐，黄金大片，超强视听感觉，惊爆你的眼球！</span> </div> </div> </div> </div> </body> </html>
这里的css文件后缀是csss，只是为了说明css文件和后缀名无关，原来还不知道这个...
style.csss:
* { margin: 0; padding: 0; } a { text-decoration: none; } #contianer { width: 700px; margin-top: 100px; margin-left: 50px; padding: 30px; background-color: #d5d5d5; border-radius: 3px; border: 1px solid #e5e5e5; } .fix { zoom:1; } .fix:after { display:block; content:'clear'; clear:both; line-height:0; visibility:hidden; } .each-film { float: left; margin-bottom: 20px; margin-right: 20px; padding: 5px; /*border: 1px black solid;*/ } .film-info { width: 200px; margin-top: 13px; font: 12px/1.5 Arial,Tahoma,'宋体',Verdana,STHeiTi,sans-serif; text-align: left; } .film-info span { font-size: 15px; }