<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>layout</title> <style> *{ margin: 0; padding: 0; } .container{ padding: 15px; } .header{ position: relative; padding: 10px; margin-bottom: 10px; border: solid 2px #4CAF50; } .log{ width: 100px; height: 100px; float: left; border: solid 2px #E91E63; } .user{ line-height: 1.5em; width: 5em; border: solid 2px #E91E63; position: absolute; bottom: 10px; right: 10px; } .asider{ width: 200px; height: 50px; border: solid 2px #E91E63; background-color: #4CAF50; float: right; } .content{ margin-right: 210px; height: 300px; border: solid 2px #E91E63; } .clear:after{ display: block; content: "."; height: 0; visibility: hidden; clear: both; } .footer{ margin-top: 20px; background-color: #E0E0E0; text-align:center; } </style> </head> <body> <div class="container"> <div class="header clear"> <div class="log">logo</div> <div class="user">用户名</div> </div> <div> <div class="asider">asider,宽度200px</div> <div class="content">content，宽度自适应</div> </div> <div class="footer">footer</div> </div> </body> </html>
效果截图:
尤其注意CSS代码中的clear类