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

不多少代码奉上：

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. Codeforces Round #424 (Div. 1, rated, based on VK Cup Finals)

    A 题意:给你人的坐标,钥匙的坐标,办公室的坐标.要求所有人能够拿到钥匙并且走到办公室的最短时间.一个位置只能有一个人,一个位置只有一把钥匙,人和钥匙可以在同一个位置. 思路:DP+贪心,dp[i]表 ...

  2. ASP.NET MVC项目实现BasePage基类用作ASPX.CS网页继承

    在ASP.NET MVC项目开发,还是需要创建一些Web Page来实现一些功能,如呈现报表等... 但是一旦项目的.ASPX网页太多了,其中的程序代码也会有代码冗余,出现这些情况,我们得需要对这些代 ...

  3. 【sql注入】浅谈sql注入中的Post注入

    [sql注入]浅谈sql注入中的Post注入 本文来源:i春秋学院 00x01在许多交流群中,我看见很多朋友对于post注入很是迷茫,曾几何,我也是这样,因为我们都被复杂化了,想的太辅助了所以导致现在 ...

  4. JDK 在 Linux 上安装的详细过程

    1.下载JDK Linux上一般会安装Open JDK,如果有系统预装了OpenJDK的话需要先卸载掉OpenJDK, 卸载过程可以参考这里:https://www.cnblogs.com/sxdcg ...

  5. js实现复制内容自动添加版权信息

    场景:当我从网上复制了所需代码到编辑器粘贴时,总会有如下版权信息提示   看到好几次后,在好奇心的驱使下开始搜寻答案.网上有好几种写法,最开始我找到了如下JS代码 document.body.onco ...

  6. scws简单中文分词

    demo如下: /** * 中文分词 * @param $keyword * @param $getTop * @param $limit * @return array */ function sp ...

  7. Ansible工具原理一

    ansible是新出现的自动化运维工具,基于Python开发,集合了众多运维工具(puppet.cfengine.chef.func.fabric)的优点,实现了批量系统配置.批量程序部署.批量运行命 ...

  8. Java 中的 String 真的是不可变吗？

    我们都知道 Java 中的 String 类的设计是不可变的,来看下 String 类的源码. public final class String implements java.io.Seriali ...

  9. IntelliJ IDEA如何设置新建类时，自动注释作者信息和日期时间

    本文提供两种注释风格供参考. 风格1:简约Style 效果如下: 设置步骤: File--> Settings--> Editor--> File and Code Template ...

  10. 《CLR Via C#》读书笔记：26.线程基础

    一.线程开销 操作系统创建线程是有代价的,其主要开销在下面列举出来了. 内存开销 线程内核对象 拥有线程描述属性与线程上下文,线程上下文占用的内存空间为 x86 架构 占用 700 字节.x64 架构 ...