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>

?

總結

以上是生活随笔為你收集整理的DIV固定宽度和动态拉伸混合水平排列的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。