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

不多少代码奉上：

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. Leetcode11 Container With Most Water 解题思路 （Python）

    今天开始第一天记录刷题,本人编程小白,如果有写的不对.或者能更完善的地方请个位批评指正! 准备按tag刷,第一个tag是array: 这个是array的第一道题:11. Container With ...

  2. git 的学习使用记录

    git initls -ahgit add xxxgit commit -m "some message" git statusgit loggit log --pretty=on ...

  3. 8.0.11版本的mysql更改root密码

  4. 安装PyQt5时缺少designer.exe的解决办法

    学习PyQt框架的时候,看到了可以用可视化的方法搭建界面,好像ios的xib,但是安装完成pyqt5后怎么都找不designer.exe这个文件,于是查到了一下.发现了可以通过安装pip instal ...

  5. Python自动化编程-树莓派的介绍与使用(一)

    Raspberry Pi(中文名为“树莓派”,简写为RPi,(或者RasPi / RPI) [1]  是为学习计算机编程教育而设计),只有信用卡大小的微型电脑,其系统基于Linux.  随着Windo ...

  6. Hadoop 单表关联

    前面的实例都是在数据上进行一些简单的处理,为进一步的操作打基础.单表关联这个实例要求从给出的数据中寻找到所关心的数据,它是对原始数据所包含信息的挖掘.下面进入这个实例. 1.实例描述 实例中给出chi ...

  7. 使用MagicOnion实现gRPC

    1.什么是gRPC 官方文档:https://grpc.io/docs/guides/index.html 2.什么是MagicOnion MagicOnion开源地址:https://github. ...

  8. Git使用详细教程(5)：修改提交说明

    在使用git的过程中,我们有时在提交时,注释说明会写错,那么我们该如何修改这次提交说明呢?在SVN上我们只能在代码的某个地方加一个不影响功能的空格再次提交,然后写新说明.但是在Git中我们可以吃后悔药 ...

  9. Core 接口发布报错

    An error occurred while starting the application 提示:启动应用程序时发生错误 这个错误在Startup启动项里面 要找具体的报错位置 如下 这样就可以 ...

  10. HBase相关的一些点

    1.在运行Hbase时,如果遇到出错之后: 可以通过{HBASE_HOME}目录,我的是在/usr/soft/hbase下的logs子目录中的日志文件查看错误原因.2.启动关闭Hadoop和HBase ...