JSFiddle - React, Tailwind, and code Playground

HTML

<!-- float+position+margin（两侧自动，中间定宽） -->
<div class="father1">
    <div class="box left">左</div>
</div>
<div class="father2">
    <div class="box right">右</div>
</div>
<div class="box center">中</div>

CSS

html,body{margin:0; padding: 0;}

.box{ height: 200px; line-height:200px; text-align:center; background-color: #FAD7F0;}
.father1{float:left; width:50%;_margin-right:-3px;}
.father2{margin-left:50%; text-align:right; _margin-left:0; _zoom:1;}
.left{ margin-right:100px;}
.right{margin-left:100px;}
.center{ background:#C7DAFC;width:200px; position:absolute; left:50%; margin-left:-100px; top:0; z-index:2;}