代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>双飞翼布局</title> <style type="text/css"> .header, .footer { width: 100%; height: 70px; background-color: lightgray; } .content { width: 1000px; height: 100%; background-color: lightgreen; margin: auto; } .container { width: 1000px; margin: auto; background-color: green; min-height: 650px; overflow: hidden; } .wrap { width: 100%; float: left; background-color: lightblue; } .main { min-height: 650px; background-color: blue; margin: 0 200px; } .left { width: 200px; min-height: 650px; background-color: cyan; float: left; margin-left: -100%; } .right { width: 200px; min-height: 650px; background-color: skyblue; float: left; margin-left: -200px; } </style> </head> <body> <!-- header --> <div> <div> header </div> </div> <!-- container --> <div> <div> <div>main</div> </div> <div>left</div> <div>right</div> </div> <!-- footer --> <div> <div> content </div> </div> </body> </html>
手抄代码