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