圣杯布局总结
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
總結
- 上一篇: 好听唯美小清新的网名133个
- 下一篇: java 运行 .jar 文件乱码