html 三列布局（两列自适应，一列固定宽度）-阿里云开发者社区

html 三列布局（两列自适应，一列固定宽度）

2018-09-20 868

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 原文:html 三列布局（两列自适应，一列固定宽度）不做过多解释：主要是记录一个完整的布局样式，实现页面大致三列其中左右两列是自适应宽度，中间固定宽度效果。不多少代码奉上： CSS样式代码： /******************** *公共标签样式 ***************...

原文: html 三列布局（两列自适应，一列固定宽度）

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

不多少代码奉上：

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: 0;
    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 三列布局（两列自适应，一列固定宽度）

CSS样式代码：

html代码布局：

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

html 三列布局（两列自适应，一列固定宽度）

CSS样式代码：

html代码布局：

热门文章

最新文章

相关课程

相关电子书

相关实验场景