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

不多少代码奉上：

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:;

    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 三列布局（两列自适应，一列固定宽度）的更多相关文章

  1. jqm的多列布局demo,html5的多列布局demo,多列布局的具体解说,html5开发实例具体解释

    因为移动设备屏幕宽度较小,所以一般不建议使用多列布局.但有时你可能须要并排放置一些元素(如button之类的). jQuery Mobile通过约定的类名ui-grid来提供了一种基于css的多列布局 ...

  2. css实现等高布局 两栏自适应布局 三栏自适应布局

    等高布局: HTML结构如下: <div class="wrapper"> <div class="box"> <h1>.. ...

  3. css布局 - 两栏自适应布局的几种实现方法汇总

    这种两列布局的样式是我们在平时工作中非常常见的设计,同时也是面试中要求实现的高频题.很有必要掌握以备不时之需: 整理了几种实现方法,当然,风骚的代码不止这几种能实现,欢迎各位的补充. 方法汇总目录 简 ...

  4. 一个DIV三列布局100%高度自适应的好例子（国外）

    <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W ...

  5. 用margin实现两列布局中的自适应列

    <div id="wrapper"> <div id="col1"> "fixed" </div> &l ...

  6. css布局: 两栏 自适应高度

    只使用css实现 有两种方式, 一种是通过相对定位,再绝对定位获取父亲元素的高度, 一种是通过margin-bottom:-999em;padding-bottom: 999em; 父亲元素超出隐藏 ...

  7. DIV+CSS 网页布局之：三列布局

    1.宽度自适应三列布局 三列布局的原理和两列布局的原理是一样的,只不过多了一列,只需给宽度自适应两列布局中间再加一列,然后重新计算三列的宽度,就实现了宽度自适应的三列布局. 同样的道理,更多列的布局, ...

  8. DIV+CSS 网页布局之：两列布局

    1.宽度自适应两列布局 两列布局可以使用浮动来完成,左列设置左浮动,右列设置右浮动,这样就省的再设置外边距了. 当元素使用了浮动之后,会对周围的元素造成影响,那么就需要清除浮动,通常使用两种方法.可以 ...

  9. ccs之经典布局（二）（两栏，三栏布局）

    接上篇ccs之经典布局(一)(水平垂直居中) 四.两列布局 单列宽度固定,另一列宽度是自适应. 1.float+overflow:auto; 固定端用float进行浮动,自适应的用overflow:a ...

  10. CSS多列布局

    × 目录 [1]列宽 [2]列数 [3]列间距[4]列rule[5]跨列[6]列填充[7]多列 前面的话 CSS新增了多列布局特性,可以让浏览器确定何时结束一列和开始下一列,无需任何额外的标记.简单来 ...

随机推荐

  1. jdk环境变量的设置

    一.jdk下载网址 https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 二.环境变 ...

  2. 使用PowerShell快速部署Win12R2虚拟化桌面

    PowerShell一直是微软windows_Server产品中重要的一部分,可以通过PowerShell来完成所有的服务器配置,甚至一些在图形界面下无法完成的事情.随着每一个新版本的微软产品或者服务 ...

  3. 关于 this 关键字的使用

    package com.jsti.guiyang_01; /* 自定义Phone类 this关键字 代表当前正在调用这个方法(访问成员变量)的对象(实例) 1.在setxxx方法中用来区分成员变量和局 ...

  4. mysql case when then else end 的写法

    select t.colum1,t.colum2 (case when t.colum1 = '' then '' t.when colum2 = '' then '' else '' end ) a ...

  5. 关于css如何让图片文字居中的方法

    在将父级转换为单元格形式时,设置的相关属性  可以达到如下效果:

  6. 【react】利用shouldComponentUpdate钩子函数优化react性能以及引入immutable库的必要性

    凡是参阅过react官方英文文档的童鞋大体上都能知道对于一个组件来说,其state的改变(调用this.setState()方法)以及从父组件接受的props发生变化时,会导致组件重渲染,正所谓&qu ...

  7. Python学习笔记【第十三篇】：Python网络编程一Socket基础

    什么是⽹络 网络能把双方或多方连在一起的工具,即把数据从一方传递到另一方进行数据传递. 网络编程就是不同电脑上的软件能够进行数据传递.即进程间的通讯. 什么是TCP/IP协议 协议就是大家一起遵守的约 ...

  8. SpringBoot+logback实现日志打印

    logback介绍 logback是一款开源的日志框架,内核重写了,是基于log4j基础进行改良的.其官网为logback.qos.ch.logback在性能上有很大提升,拥有更多特性. logbac ...

  9. IndexedDB 简单封装

    IndexedDB 浏览器数据库,是一个非关系型数据库,数据形式使用的是json,IndexedDB适合存储大量数据,它的API是异步调用的,当然他的api 也相对复杂. 当然浏览器数据存储 还有Lo ...

  10. FileSync文件同步更新工具

    FileSync是一款文件同步更新工具,它提供了对一个或多个应用的文件进行管理和同步更并功能,基于MD5的文件对比方式可以使管理者轻易地发布需要更新应用文件.FileSync主要模块包括:服务端,CL ...