1.效果图
2.源代码
html
<h2>1.头部固定，尾部拉伸</h2>
<div class="container" id="div1"><div class="head"></div><div class="tail"></div>
</div><h2>2.尾部固定，头部拉伸</h2>
<div class="container" id="div2"><div class="tail"></div><div class="head"></div>
</div><h2>3.头尾固定，中间拉伸</h2>
<div class="container" id="div3"><div class="head"></div><div class="tail"></div><div class="center"></div>
</div><h2>4.中间固定，两头拉伸</h2>
<div class="container" id="div4"><div class="head"><div class="inner"></div></div><div class="tail"><div class="inner"></div></div><div class="center"></div>
</div>css
<!-- 样式 -->
<style type="text/css">/* 容器宽度为100% */.container{width: 100%;}/** 头部div固定宽度 **/#div1 .head{width: 200px;height: 100px;background-color: #00F7DE;float: left;}/** 尾部div自动填充拉伸 **/#div1 .tail{width: auto; /** 宽度不写或者auto都行 **/height: 100px;margin-left: 200px;background-color: #FFB800;}/** 尾部div固定宽度 **/#div2 .tail{width: 200px;height: 100px;background-color: #FFB800;float: right;}/** 头部div自动填充拉伸 **/#div2 .head{width: auto;height: 100px;margin-right: 200px;background-color: #00F7DE;}#div3 .head{width: 200px;height: 100px;background-color: #00F7DE;float:left}#div3 .center{width:auto;height: 100px;background-color: #009f95;margin-left: 200px;margin-right: 200px;}#div3 .tail{width:200px;height: 100px;background-color:#FFB800;float: right;}#div4{position: relative;}#div4 .head{width: 50%;height: 100px;float: left;}#div4 .head .inner{height: 100px;background-color: #00F7DE;margin-right: 100px;}#div4 .tail{width: 50%;height: 100px;float: left;}#div4 .tail .inner{height: 100px;background-color:#FFB800;margin-left: 100px;}#div4 .center{position: absolute;width: 200px;height: 100px;left: 50%;margin-left: -100px;background-color: #009f95;}
</style>
