04_02.float简单布局

来源：互联网发布：icloud软件下载编辑：程序博客网时间：2024/05/19 19:14

<!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>Document</title><style type="text/css">body{margin: 0 auto;}.main{width: 900px;margin: 0 auto;}.main .left{width: 300px;float: left;}.main .left div{height: 298px;background: green;border: solid 1px blue;}.main .center{width: 300px;float: left;}.main .center div{height: 198px;background: gray;border: solid 1px black;}.main .right{width: 300px;float: left;}.main .right div{height: 298px;background: blue;border: solid 1px red;}</style></head><body><div class="main"><div class="a"></div><div class="left"><div></div><div></div></div><div class="center"><div></div><div></div><div></div></div><div class="right"><div></div><div></div></div></div></body></html>

0 0