html 三列布局（两列自适应，一列固定宽度）-白红宇

原文:

不做过多解释：主要是记录一个完整的布局样式，实现页面大致三列其中左右两列是自适应宽度，中间固定宽度效果。

不多少代码奉上：

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;}    
         三列布局    
         
         
         
         
             
              
               
      
        
                  
                       
                            
         名称/文号：                    
                         
        
                          
       
            
                       
        
         左边
        
                
        
         中间
        
                
        
         右边
        
            
       
        
      
    
     
    
         
             
                  
                   
                       流程转交

最终效果展示：