1.左側定寬,右側自適應布局

html部分

<div class="parent"><div class="layout_left">左邊寬度固定</div><div class="layout_main">主內容寬度自適應</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.右側定寬,左側自適應布局

html部分

<div class="parent"><div class="layout_main">主內容欄寬度自適應</div><div class="layout_right">側邊欄寬度固定</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.左/右側定寬,中間內容自適應布局

html部分

<div class="parent"><div class="layout_aside layout_left">左側寬度固定</div><div class="layout_main">主內容欄寬度自適應</div><div class="layout_aside layout_right">右側寬度固定</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>

?

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

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

?

轉載于:https://www.cnblogs.com/jrxiang/p/11268189.html

總結

以上是生活随笔為你收集整理的圣杯布局总结的全部內容，希望文章能夠幫你解決所遇到的問題。

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