css三列布局，两侧宽度固定，中间宽度自由伸缩

来源：互联网发布：用java打印对称三角形编辑：程序博客网时间：2024/05/07 23:39
<!DOCTYPE html><head><title>两侧宽度固定,中间宽度自由伸缩</title><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>1-3-1一列固定，两侧固定，中间宽度自由伸缩</title><meta name="description" content=""><meta name="keywords" content=""><style type="text/css">*{margin: 0;padding: 0;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}html {min-height: 100%;_height:100%;height:100%;}body {min-height: 100%;_height:100%;height:100%;background: #fff;font: 14px 宋体;}.rounded {background: red;width: 100%;}.rounded h2 {background: orange;padding: 20px 20px 10px;margin: 0;}.rounded .main {background: yellow;padding: 10px 20px;margin: -20px 0 0 0;}.rounded .footer {background: green;}.rounded .footer p {color: red;text-align: right;background: blue;display: block;padding: 10px 20px 20px;margin: -20px 0 0 0;}#header,#pagefooter,#container {margin: 0 auto;width: 85%;}#side {width: 200px;float: right;}#outerWrap {width: 100%;float: left;margin-left: -200px;}#innerWrap {margin-left: 200px;}#left {width: 150px;float: left;}#contentWrap {width: 100%;float: right;margin-right: -150px;}#content {margin-right: 150px;}#content img {float: right;}#pagefooter {clear: both;}</style></head><body><div id="header"><div class="rounded"><h2>页头</h2><div class="main"><p>锄禾日当午，汗滴禾下土</p></div><div class="footer"><p></p></div></div></div><div id="container"><div id="outerWrap"><div id="innerWrap"><div id="left"><div class="rounded"><h2>正文</h2><div class="main"><p>锄禾日当午，汗滴禾下土<br/>锄禾日当午，汗滴禾下土</p><div class="footer"><p>查看详细信息>></p></div></div></div></div><div id="contentWrap"><div id="content"><div class="rounded"><h2>正文</h2><div class="main"><p>锄禾日当午，汗滴禾下土</p></div><div class="footer"><p>查看详细信息>></p></div></div></div></div></div></div><div id="side"><div class="rounded"><h2>正文2</h2><div class="main"><p>锄禾日当午，汗滴禾下土<br/>锄禾日当午，汗滴禾下土</p></div><div class="footer"><p>查看详细信息>></p></div></div></div></div><div id="pagefooter"><div class="rounded"><h2>页脚</h2><div class="main"><p>锄禾日当午，汗滴禾下土</p></div><div class="footer"><p></p></div></div></div></body></html>
0 0