html 三列布局（兩列自適應，一列固定寬度）

ranwu 發布于2019-04-23 13:29 / 2476人閱讀

摘要：不做過多解釋主要是記錄一個完整的布局樣式，實現頁面大致三列其中左右兩列是自適應寬度，中間固定寬度效果。

不做過多解釋：主要是記錄一個完整的布局樣式，實現頁面大致三列其中左右兩列是自適應寬度，中間固定寬度效果。

不多少代碼奉上：

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的寬度自適應兩列數據合并成一列

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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