描述:两边的内容变化,中间的内容不变
代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ padding: 0px; margin: 0px; } section{ height:300px; padding-left: 100px; padding-right: 150px; } .content{ width: 100%; height: 300px; background-color: red; float: left; } .left{ width: 100px; height:300px; background-color: yellow; float: left; margin-left: -100%; position: relative; left: -100px; } .right{ width: 150px; height: 300px; background-color: blue; float: left; margin-left: -150px; position: relative; left: 150px; } </style> </head> <body> <section> <div class="content"></div> <div class="left"></div> <div class="right"></div> </section> </body> </html>