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

ranwu 发布于2019-04-23 13:29 / 2475人阅读

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

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

不多少代码奉上：

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>

    
    <div class="footer">
        <div class="submit">
            
            <a class="submit-btn" onclick="window.print()">
                流程转交
            a>
        div>
    div>
body>
html>

最终效果展示：

GPU云服务器云服务器表格固定一列html 右列自适应 html的宽度自适应两列数据合并成一列

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1952.html

CSS布局基础：两列 or 三列自适应

【第一列或某两列固定宽度，最后一列占据页面剩余宽度（即宽度自适应）】写这篇文章主要是为了解决一个实际遇到的问题：左右两列布局，左侧宽度固定，右侧宽度自适应（或左中右三列布局，左侧和中间宽度固定，右侧宽度自适应），当页面宽度变化时，怎样使右侧元素中的内容始终在页面剩余宽度中居中显示，将右侧元素设置了text-align: center;之后，问题其实也就是怎样让右侧元素的宽度占据页面剩余所有宽度。...

hatlonely 2019-08-29 12:22 评论0 收藏0
CSS布局基础：两列 or 三列自适应

【第一列或某两列固定宽度，最后一列占据页面剩余宽度（即宽度自适应）】写这篇文章主要是为了解决一个实际遇到的问题：左右两列布局，左侧宽度固定，右侧宽度自适应（或左中右三列布局，左侧和中间宽度固定，右侧宽度自适应），当页面宽度变化时，怎样使右侧元素中的内容始终在页面剩余宽度中居中显示，将右侧元素设置了text-align: center;之后，问题其实也就是怎样让右侧元素的宽度占据页面剩余所有宽度。...

melody_lql 2019-08-01 16:38 评论0 收藏0
PC端CSS布局汇总

摘要：因为端和移动端布局差异较大，所以我将两端布局分开讲，本文章将针对端的布局进行讲解，以下代码只写关键代码。为了提高网页性能，考虑到，表格元素尽量少用，有其他选择的情况尽量用其他布局。前言此文章是解剖CSS布局原理的续集，之前那篇文章讲的都是理论，本文章讲具体的实例，根据自己对布局的理解与开发经验分为以下几类。因为PC端和移动端布局差异较大，所以我将两端布局分开讲，本文章将针对P...

zhangxiangliang 2019-08-29 13:55 评论0 收藏0
几种常见的CSS布局

摘要：本文概要本文将介绍如下几种常见的布局其中实现三栏布局有多种方式，本文着重介绍圣杯布局和双飞翼布局。借助等高布局正负可解决，下文会介绍双飞翼布局特点同样也是三栏布局，在圣杯布局基础上进一步优化，解决了圣杯布局错乱问题，实现了内容与布局的分离。本文概要本文将介绍如下几种常见的布局： showImg(https://segmentfault.com/img/remote/14600000...

FuisonDesign 2019-08-23 12:57 评论0 收藏0
几种常见的CSS布局

摘要：本文概要本文将介绍如下几种常见的布局其中实现三栏布局有多种方式，本文着重介绍圣杯布局和双飞翼布局。借助等高布局正负可解决，下文会介绍双飞翼布局特点同样也是三栏布局，在圣杯布局基础上进一步优化，解决了圣杯布局错乱问题，实现了内容与布局的分离。本文概要本文将介绍如下几种常见的布局： showImg(https://segmentfault.com/img/remote/14600000...

andot 2019-08-02 11:58 评论0 收藏0