优点:先加载中间的数据
思路:
效果:
代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>双飞翼演示</title> <style> body{ margin:0; } .container { width: 100% ; overflow: hidden;} .container div{ float: left; min-height: 200px;} .container .body{ width: 100%; } .container .body div{ margin:0 120px; background: #cccccc; float:none; } .container .left{ width: 100px; background: red; margin-left: -100%;} .container .right{ width: 100px; background: blue; margin-left:-100px; } </style> </head> <body> <div class="container"> <div class="body"> <div> 中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间<br/> 中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间<br/> 中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间<br/> 中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间<br/> 中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间<br/> 中间中间中间中间中间中间中间中间中间中间中间中间<br/> 中间中间中间中间中间中间中间中间中间中间中间中间<br/> 中间中间中间中间中间中间中间中间中间中间中间中间<br/> 中间中间中间中间中间中间中间中间中间中间中间中间<br/> 中间中间中间中间中间中间中间中间中间中间中间中间<br/> 中间中间中间中间中间中间中间中间中间中间中间中间<br/> 中间中间中间中间中间中间中间中间中间中间中间中间<br/> 中间中间中间中间中间中间中间中间中间中间中间中间<br/> 中间中间中间中间中间中间中间中间中间中间中间中间<br/> 中间中间中间中间中间中间中间中间中间中间中间中间<br/> 中间中间中间中间中间中间中间中间中间中间中间中间<br/> 中间中间中间中间中间中间中间中间中间中间中间中间<br/> 中间中间中间中间中间中间中间中间中间中间中间中间<br/> 中间中间中间中间中间中间中间中间中间中间中间中间<br/> </div> </div> <div class="left">左侧</div> <div class="right">右侧</div> </div> </body> </html>这里发现一个问题就是:左侧和右侧高度不与中间高度一样,将在 这里 解决!