<!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> DIV三列高度自适应</title> <style type=”text/css”> *{padding:0;margin:0;}.main .box{float:left;width:300px;background-color:#FFF;margin-top:8px;margin-bottom:-2000px;margin-left:8px;display:inline;border:1px solid #999;padding-right:8px;padding-left:8px;padding-bottom:2000px;padding-top:8px;}.main{background-color:#CCC;overflow:hidden;width:986px;margin-right:auto;margin-left:auto;position:relative;}.main_bottom{background-color:#CCC;height:8px;width:986px;margin-right:auto;margin-left:auto;overflow:hidden;}.main .box .bottom_line{background-color:#999;height:1px;position:absolute;width:318px;bottom:0px;_bottom:-1px;left:8px;display:inline;overflow:hidden;}.main .box .bottom_line2{background-color:#999;height:1px;position:absolute;width:318px;bottom:0px;_bottom:-1px;left:334px;display:inline;overflow:hidden;}.main .box .bottom_line3{background-color:#999;height:1px;position:absolute;width:318px;bottom:0px;_bottom:-1px;left:660px;display:inline;overflow:hidden;}</style> </head> <body> <div class=”main”> <div class=”box”> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <div class=”bottom_line”></div> </div> <div class=”box”> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <div class=”bottom_line2″></div> </div> <div class=”box”> <p>1</p> <p>2</p> <p>3</p> <p>5</p> <p>6</p> <p>7</p> <div class=”bottom_line3″></div> </div> </div> <div class=”main_bottom”></div> </body> </html>
|