三欄布局（二）-------上下寬高固定，中間自適應

Render 發布于2019-04-23 13:08 / 1116人閱讀

摘要：上一篇寫的是左右寬高固定，中間自適應，根據上一篇的內容，總結了下上下寬高固定，中間自適應的幾種布局方式，有種布局方式話不多說，直接上代碼。

上一篇寫的是左右寬高固定，中間自適應，根據上一篇的內容，總結了下上下寬高固定，中間自適應的幾種布局方式，

有4種布局方式：? ?position;? ?flex;? ? table;? ?grid; 話不多說，直接上代碼。

DOCTYPE html>
<html>
<head>
    <title>上中下三欄布局title>
    <style type="text/css">
        html * {
            padding: 0;
            margin: 0;
        }
        html, body{
            height:100%;
        }
        .layout{
            width: 200px;
            height: 100%;
            display: inline-block;
                overflow: hidden;
        }
        .layout .three_columns > div{
            width: 200px;
        }
    style>
head>
<body>
    
    <section class="layout position">
        <style type="text/css">
            .layout.position .top{
                position: absolute;
                top: 0;
                height: 200px;
                background: #90D9F7;
            }
            .layout.position .middle{
                position: absolute;
                top: 200px;
                bottom: 200px;
                background: pink;
            }
            .layout.position .bottom{
                position: absolute;
                bottom: 0;
                height: 200px;
                background: #F5DE25;
            }
            .clear{ clear:both} 
        style>
        <article class="three_columns">
            <div class="top">上div>
            <div class="middle">
                <h1>position布局h1>
            div>
            <div class="bottom">下div>
            <div class="clear">div> 
        article>

    section>

    
    <section class="layout flexbox">
        <style type="text/css">
            .layout.flexbox{
                margin-left: 20px;
                height: 100%;
            }
            .layout.flexbox .three_columns{
                width: 200px;
                height: 100%;
                display: flex;
                flex-direction: column;
            }
            .layout.flexbox .top{
                height: 200px;
                background: #90D9F7;
            }
            .layout.flexbox .middle{
                flex: 1;
                background: pink;
                overflow: auto;
            }
            .layout.flexbox .bottom{
                height: 200px;
                background: #F5DE25;
            }
        style>
        <article class="three_columns">
            <div class="top">上div>
            <div class="middle">
                <h1>flexbox布局h1>
            div>
            <div class="bottom">下div>
            
        article>

    section>

    
    <section class="layout table">
        <style type="text/css">
            .layout.table{
                margin-left: 20px;
                height: 100%;
            }
            .layout.table .three_columns{
                width: 200px;
                height: 100%;
                display: table;
            }
            .layout.table .three_columns > div{
                display: table-row;
                vertical-align: middle;
            }
            .layout.table .top{
                height: 200px;
                background: #90D9F7;
            }
            .layout.table .middle{
                background: pink;
                overflow: auto;
            }
            .layout.table .bottom{
                height: 200px;
                background: #F5DE25;
            }
        style>
        <article class="three_columns">
            <div class="top">上div>
            <div class="middle">
                <h1>table布局h1>
            div>
            <div class="bottom">下div>
            
        article>
    section>
    
    <section class="layout grid">
        <style type="text/css">
            .layout.grid{
                margin-left: 20px;
                height: 100%;
            }
            .layout.grid .three_columns{
                width: 200px;
                height: 100%;
                display: grid;
                grid-template-rows: 200px auto 200px;
                grid-template-columns: 200px;
            }
            .layout.grid .top{
                height: 200px;
                background: #90D9F7;
            }
            .layout.grid .middle{
                background: pink;
                overflow: auto;
            }
            .layout.grid .bottom{
                height: 200px;
                background: #F5DE25;
            }
        style>
        <article class="three_columns">
            <div class="top">上div>
            <div class="middle">
                <h1>grid布局h1>
            div>
            <div class="bottom">下div>
            
        article>
    section>
body>
html>

下邊圖片是代碼運行的效果圖，大家可以運行代碼試試看。

自己總結的，有不對的地方歡迎大家指正！

-ＴＨＥ?。牛危?

云服務器 GPU云服務器 html5寬高自適應自適應二值化算法三欄布局 html5 三欄布局

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

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/1477.html

【CSS】三欄/兩欄寬高自適應布局大全

摘要：方案一方案二和方案的有點是兼容性好因為都是比較老的解決方案了缺點是之后需要清除浮動造成的影響定位的話就是絕對定位之后脫離文檔流了你要注意用包裹一下方案三是目前移動端主流的方案的語法缺點就是以下不支持。頁面布局注意方案多樣性、各自原理、各自優缺點、如果不定高呢、兼容性如何三欄自適應布局,左右兩側300px,中間寬度自適應 (1) 給出5種方案方案一: float (左右浮動,中間...

jindong 2019-08-01 18:28 評論0 收藏0
【CSS】三欄/兩欄寬高自適應布局大全

摘要：方案一方案二和方案的有點是兼容性好因為都是比較老的解決方案了缺點是之后需要清除浮動造成的影響定位的話就是絕對定位之后脫離文檔流了你要注意用包裹一下方案三是目前移動端主流的方案的語法缺點就是以下不支持。頁面布局注意方案多樣性、各自原理、各自優缺點、如果不定高呢、兼容性如何三欄自適應布局,左右兩側300px,中間寬度自適應 (1) 給出5種方案方案一: float (左右浮動,中間...

isaced 2019-08-29 14:21 評論0 收藏0
三欄布局（一）-------左右寬高固定，中間自適應

摘要：幼圓常見的頁面布局有幼圓左右寬度固定，中間自適應幼圓上下高度固定，中間自適應幼圓左寬度固定，右自適應幼圓上高度固定，下自適應，幼圓下邊是我看過網上的視頻后寫出來的三欄布局左右寬高固定，中間自適應幼圓有種布局方常見的頁面布局有 1、左右寬度固定，中間自適應； 2、上下高度固定，中間自適應； 3、左寬度固定，右自適應； 4、上高度固定，下自適應，下邊是我看過網上的視頻后寫出來的三欄布局-左右寬...

Aldous 2019-04-23 13:08 評論0 收藏0
CSS 布局經典問題初步整理

摘要：布局經典問題初步整理標簽前端本文主要對布局中常見的經典問題進行簡單說明，并提供相關解決方案的參考鏈接，涉及到三欄式布局，負，清除浮動，居中布局，響應式設計，布局，等等。 CSS 布局經典問題初步整理標簽：前端 [TOC] 本文主要對 CSS 布局中常見的經典問題進行簡單說明，并提供相關解決方案的參考鏈接，涉及到三欄式布局，負 margin，清除浮動，居中布局，響應式設計，Fl...

Amos 2019-08-29 12:36 評論0 收藏0
常見的面試問題：【CSS】已知高度，寫出三欄布局

摘要：問題已知高度，寫出三欄布局，其中左右兩欄寬度各位，中間自適應回答效果示例解決方案浮動絕對定位彈性布局表格布局網格布局。方案二絕對定位將和的都設置脫離文檔流，給的設置左右兩邊距離即左右兩邊盒子的實際寬度。問題：已知高度，寫出三欄布局，其中左右兩欄寬度各位200px，中間自適應showImg(https://segmentfault.com/img/bVbu6r1?w=300&h=1...

MobService 2019-08-02 15:33 評論0 收藏0