html 三列布局(两列自适应,一列固定宽度)
2018-08-06 17:20
1156 查看
不做过多解释:主要是记录一个完整的布局样式,实现页面大致三列其中左右两列是自适应宽度,中间固定宽度效果。
不多少代码奉上:
最终效果展示:
不多少代码奉上:
CSS样式代码:
/******************** *公共标签样式 ********************/ /********************* *main 外边框自适应区域 ***********************/ .main { width: 100%; min-width: 1100px; padding-bottom: 30px; box-sizing: border-box; background-color: #FFF; border-radius: 6px; box-shadow: 0px 4px 6px 0px rgba(70, 95, 106,.25); } /*title 标题 */ .main-title { height: 36px; line-height: 36px; text-align: center; font-size: 1em; font-weight: bold; color: #263135; background-color: #d1d6da; border-top-left-radius: 6px; border-top-right-radius: 6px; } /********************* *头部文号区:70px ***********************/ .content_title { width: 100%; margin: 0 auto; text-align: center; height: 30px; padding-top: 20px; padding-bottom: 20px; line-height: 30px; } /********************** *区域块设置 **********************/ .area { height:500px; } .area_left { float: left; width: calc(50% - 75px); height: 100%; background-color: bisque; } .area_center { float: left; width: 150px; height: 100%; background-color: black; } .area_right { float: left; width: calc(50% - 75px); height: 100%; background-color: bisque; } /************************** *footer底部区域 ***************************/ .footer { margin: 40px 0; } /* 提交 */ .submit { height: 40px; } /* 提交按钮*/ .submit-btn { height: 40px; width: 200px; display: block; margin: 0 auto; border-radius: 5px; color: #fff; text-decoration: none; text-align: center; line-height: 40px; font-size: 1.1em; background-color: #1bbc9b; cursor: pointer; } /******************** *公共标签默认属性设置 ********************/ body { margin: 0; font-size: 15px; padding: 20px 20px 0 20px; margin-bottom: 0 !important; background-color: #f0f0f0; } input { border: none; }
html代码布局:
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta http-equiv="x-ua-compatible" content="IE=9" /> <title>三列布局</title> <!--页面样式--> <link href="~/Content/css/StyleTemplate/Index.css" rel="stylesheet" /> <!--当前页面的逻辑 --> </head> <body> <!-- 主要区域 --> <div class="main"> <!-- 主要区域 标题 --> <div class="main-title"> </div> <div class="content"> <div class="content_title"> <div class="flLeft padigLeft_15"> <span class="fontBold">名称/文号:</span> <input class="int" value="发文文号001" /> </div> </div> <div class="area"> <div class="area_left">左边</div> <div class="area_center">中间</div> <div class="area_right">右边</div> </div> </div> </div> <!--footer 底部区域 --> <div class="footer"> <div class="submit"> <!-- 提交 按钮 --> <a class="submit-btn" onclick="window.print()"> 流程转交 </a> </div> </div> </body> </html>
最终效果展示:
相关文章推荐
- html 三列布局(两列固定宽度,一列自适应)
- HTML/CSS学习之 三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化
- css两列布局,一列固定宽度,另一列自适应宽度
- 如何用纯CSS布局两列,一列固定宽度,另一列自适应?
- CSS基础篇--css实现两列布局,一列固定宽度,一列宽度自适应方法
- DIV+CSS 布局一行两列,左列固定宽度,右列自适应宽度;设置最小宽度
- DIV布局之三 行两列左栏宽度固定 右栏宽度自适应1
- html css实现左右两列固定宽度中间自适应效果
- 三列布局,左右宽度固定,中间一列随浏览器窗口变化宽度
- html中散列布局的实现,中间自适应大小,两边固定宽度
- div三列,中间一列宽度自适应,2边固定
- DIV布局之三行两列左栏宽度固定右栏宽度自适应
- 利用绝对定位实现两列右边固定宽度左边自适应布局
- 【前端攻城狮之路】CSS三列布局——两侧固定宽度、中间自适应
- DIV布局之三行两列右栏宽度固定左栏宽度自适应
- CSS三列布局之左右宽度固定,中间元素自适应问题
- 左右两列固定宽度,中间自适应布局
- 三列布局(左右固定宽度,中间自适应)
- css三列布局,最右侧div固定,其他两列自适应
- div 两列布局,左侧固定宽度px,右侧自适应宽度,满屏