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
)
