1.左側(cè)定寬,右側(cè)自適應(yīng)布局

html部分

<div class="parent"><div class="layout_left">左邊寬度固定</div><div class="layout_main">主內(nèi)容寬度自適應(yīng)</div> </div>　

css部分

<style>*{margin:0;padding:0;}.parent:after {clear: both;content: " ";display: table;}.layout_left, .layout_main {float: left;}.parent {padding-left: 200px;}.layout_main {width: 100%;background:red;}.layout_left {width: 200px;margin-left: -200px;background:green;} </style>

2.右側(cè)定寬,左側(cè)自適應(yīng)布局

html部分

<div class="parent"><div class="layout_main">主內(nèi)容欄寬度自適應(yīng)</div><div class="layout_right">側(cè)邊欄寬度固定</div> </div>

css部分

<style>*{margin:0;padding:0;}.parent:after {clear: both;content: " ";display: table;}.parent {padding-right: 200px;}.layout_main {width: 100%;background:red;float: left;}.layout_right {float: right;width: 200px;background:green;margin-right: -200px;} </style>

3.左/右側(cè)定寬,中間內(nèi)容自適應(yīng)布局

html部分

<div class="parent"><div class="layout_aside layout_left">左側(cè)寬度固定</div><div class="layout_main">主內(nèi)容欄寬度自適應(yīng)</div><div class="layout_aside layout_right">右側(cè)寬度固定</div> </div>

css部分

<style>*{margin:0;padding:0;}.parent:after {clear: both;content: " ";display: table;}.layout_aside, .layout_main {float: left;}.parent {padding:0 200px;}.layout_main {width: 100%;background:red;}.layout_aside {width: 200px;background:green;}.layout_left {margin-left: -200px;}.layout_right {margin-right: -200px;float: right;} </style>

?

這些一般平時(shí)就夠用了,最后附上作者鏈接

https://www.cnblogs.com/lyzg/p/5160570.html

?

轉(zhuǎn)載于:https://www.cnblogs.com/jrxiang/p/11268189.html

總結(jié)

以上是生活随笔為你收集整理的圣杯布局总结的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。