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

不多少代码奉上：

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. mysql--user表

    mysql数据库 用例:mysql  mysql> show tables; +---------------------------+ | Tables_in_mysql | +------- ...

  2. 6 week work 1

    CSS单位 em and rem: are often used to create scalable layouts, which maintain the vertical rhythm of t ...

  3. hive 使用反射函数

    在hive中通过反射,调用java.net.URLDecoder,解码url 代码入下: select reflect('java.net.URLDecoder', 'decode',url, 'UT ...

  4. shiro授权测试

    shiro-permission.ini 创建存放权限的配置文件shiro-permission.ini,如下: [users] #用户zhang的密码是1111111,此用户具有role1和role ...

  5. Redux和React

    export app class Compo1 extends Component{ } Compo1.propType = { a:PropTypes.string, fn:PropTypes.fu ...

  6. Unity一键设置导入图片格式

    前几天由于项目原因,做了一个自动根据模型自动创建动画状态机,然后紧接着做了根据动画状态机和模型一键制作Prefab. 现在因为图片数量或者其它原因需要写一个一键设置图片格式的插件. 至于制作动画状态机 ...

  7. 816. Ambiguous Coordinates

    We had some 2-dimensional coordinates, like "(1, 3)" or "(2, 0.5)".  Then, we re ...

  8. 没执行过 rm -rf /* 的开发不是好运维

    阅读本文大概需要 1 分钟. 打开终端,获取 root 权限,执行以下命令:rm -rf /*,会发生什么呢?估计只要接触过 Linux 的人,肯定没少听过它的故事,清楚之后会发生什么可怕的事情. 科 ...

  9. 使用link标签进行预加载

    概述 html中的link标签一般用来引入css文件.但是也可以通过rel属性来进行预加载.本文记录下相关方法,供以后开发时参考,相信对其他人也有用. 参考资料: mdn 通过rel="pr ...

  10. jQuery文档操作

    jQuery文档操作 1.jq文档结构 var $sup = $('.sup'); $sup.children(); // sup所有的子级们 $sup.parent(); // sup的父级(一个, ...