三列布局,中间自适应

by noahua

HTML

<div id="container">
    <div id="left">left</div>
    <div id="center">center</div>
    <div id="right">right</div>
</div>


<div id="container1">
       <div id="right1">right</div>
    <div id="left1">left</div>
    <div id="center1">center</div>
    
</div>

CSS

#container{position: relative;height: 105px;border:1px solid red;}
#container div{border:1px solid red}
#left{position: absolute;height: 100px;top:0;left: 0;bottom: 0;width: 20px;}
#center{margin-left: 25px;margin-right: 25px;}
#right{position: absolute;height: 100px;right: 0;top: 0;bottom: 0;width: 20px;}

#container1{border:1px solid blue; margin-top:20px}
#container1 div{border:1px solid blue}
#left1{float:left}
#right1{float:right}
#center{}