田字格布局html div
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=gb2312"> <title>田字格布局</title> <style> #prat1{ width: 200px; height: 200px; background: #CDAD00; float: left; } #prat2{ width: 200px; height: 200px; background: #CD6839; float: left; } #prat3{ width: 200px; height: 200px; background: #CD6090; float: left; clear: left; } #prat4{ width: 200px; height: 200px; background: #CD3333; float: left; } </style> </head> <body> <div id="prat1">块1</div> <div id="prat2">块2</div> <div id="prat3">块3</div> <div id="prat4">块4</div> </body> </html>
块1
块2
块3
块4