<div class="m-center">中</div> <div class="left"> <div class="main">左</div> </div> <div class="right"> <div class="main">右</div> </div>
html, body { margin:0; padding: 0; } .main, .m-center { height: 200px; line-height:200px; text-align:center; } .m-center { z-index: 2; background-color: #666; width: 500px; margin-left: -250px; position: absolute; top: 0; left: 50%; } .left, .right { z-index: 1; position: absolute; top: 0; width: 50%; } .left { left: 0; } .left .main { margin-right: 250px; background-color: #ccc; } .right { right: 0; } .right .main { margin-left: 250px; background-color: #ccc; }