三层嵌套
#center{ height: 44px; background: url(img/center.jpg) 0 0 repeat-x; } #left{ height: 44px; background: url(img/left.jpg) left 0 no-repeat; } #right{ height: 44px; background: url(img/right.jpg) right 0 no-repeat; } <div id="center"> <div id="left"> <div id="right"></div> </div> </div>
2.自适应
#con{ width: 400px; background: url(img/point.png) 0 0 repeat-x; height: 20px; overflow: hidden; } #con .left{ float: left; background: #fff; } #con .right{ float: right; background: #fff; } <div id="con"> <span class="left">我是一个粉刷匠</span> <span class="right">粉刷本领强</span> </div>