css三列布局,两侧宽度固定,中间宽度自由伸缩
2016-05-02 16:24
573 查看
<!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>
相关文章推荐
- css三列布局,左边两个div固定,最右边宽度自适应
- css三列布局,中间div固定,两侧div宽度自适应
- css整体缩放布局
- css三列布局,最右侧div固定,其他两列自适应
- css两列布局,一列固定宽度,另一列自适应宽度
- CSS3新特性: mix-blend-mode: multiply
- CSS3之过渡及过渡事件
- 黑色遮罩引导蒙版 CSS实现方式
- 精通 CSS 选择器
- CSS让元素居中布局
- css经典布局——头尾固定高度中间高度自适应布局
- 苹果样式的开关
- Qt css样式大全(整理版)
- CSS样式表
- CSS选择器优先级
- CSS
- css placeholder 颜色设置
- LESSCSS
- css line-height
- css选择器