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

不多少代码奉上：

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. 31.Stack

    在Java中Stack类表示后进先出(LIFO)的对象堆栈.栈是一种非常常见的数据结构,它采用典型的先进后出的操作方式完成的.每一个栈都包含一个栈顶,每次出栈是将栈顶的数据取出,如下: Stack通过 ...

  2. [ 10.08 ]CF每日一题系列—— 602B

    Description: 一个数组,保证相邻两个元素值得差小于1,问题,最大值和最小值的差 < 1的区间长度最长是多少 Solution: 还是卡了一下,本来以为是模拟就好了,但是卡时间,想来想 ...

  3. JSTL配置文件下载地址

    Apache Tomcat安装JSTL 库步骤如下: 从Apache的标准标签库中下载的二进包(jakarta-taglibs-standard-current.zip). 官方下载地址:http:/ ...

  4. Asp.net Security框架（1）

    Security框架主要用于身份认证的,基本上所有Asp.net项目有意或者无意的都在使用的,框架的源码包含在Katana项目下. 最常见的使用方式或许就是SignIn来给客户端浏览器生成包含身份信息 ...

  5. CS61A hw01

    前不久在知乎上看到CS61A 和CS61B spring18 开课的消息.上去看了一眼,发现真的不错,所有proj hw都可以本地测试!也就是说除了没有课程成绩和官方讨论区和TA解答外,这个课完全可以 ...

  6. 《C# 从现象到本质》出版，免费送书10本

    我的第一本书<C# 从现象到本质>已于近日正式在京东和淘宝天猫上开始销售了.至此,我的图书写作和出版活动正式告一段落.图书销售网址见下. 试读样章 京东 天猫 从看书到写书 借着图书出版之 ...

  7. 【腾讯Bugly干货分享】Android 插件技术实战总结

    本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:https://mp.weixin.qq.com/s/1p5Y0f5XdVXN2EZYT0AM_A 前言 安 ...

  8. VSCode插件开发全攻略（三）package.json详解

    更多文章请戳VSCode插件开发全攻略系列目录导航. package.json 在详细介绍vscode插件开发细节之前,这里我们先详细介绍一下vscode插件的package.json写法,但是建议先 ...

  9. Java 判断两个对象是否相等

    一.使用 == 与 equals == : 它的作用是判断两个对象的地址是不是相等.即,判断两个对象是不是同一个对象.(基本数据类型==比较的是值,引用数据类型==比较的是内存地址) equals() ...

  10. 吴恩达机器学习笔记30-神经网络的反向传播算法（Backpropagation Algorithm）

    之前我们在计算神经网络预测结果的时候我们采用了一种正向传播方法,我们从第一层开始正向一层一层进行计算,直到最后一层的ℎ