css常見的各種布局下----三列布局

番茄西紅柿發(fā)布于2019-04-23 10:21 / 726人閱讀

css 三列布局，左右固定寬度右邊自適應(yīng)

　　1不使用定位，只使用浮動可以實(shí)現(xiàn)左右固定，中間寬度自適應(yīng)布局

　　　　　1.1.1 自適應(yīng)部分一定要放第一個位子，使用浮動，并且設(shè)置寬度為100%，不設(shè)置浮動元素內(nèi)容不夠稱不開整個寬度

　　　　　1.1.2 左右固定部位，使用margin-left :負(fù)數(shù)，使其左右靠齊

　　　　　1.1.3 中間自適應(yīng)部分嵌套一個div，設(shè)置margin-left 和 margin-right 使其空出左右固定的寬度

DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>三列布局title>
    <style>
    .box{
        height: 500px;
        background-color: bisque;
        position: relative;
    }
    .box .box-content {
        height: 100%;
        float: left; /* 一定要設(shè)置浮動，要不下面的模塊上不來 */
        width:100%;/* 一定要設(shè)置100%，要不內(nèi)容不夠稱不開整個頁面 */
        background-color: blue; 
        /* 默認(rèn)還是整行 */
        } 
    .box .box-content .child {
        margin: 0 210px;
            /* 中間模塊空出左右距離，設(shè)置浮動 */
        background: red;
        height: 100%;
    }
    .box .box-left { 
        width: 200px; float: left; 
        margin-left: -100%; /* 設(shè)置浮動， margin-left:-100% 可以使元素往上移一行，并且移動到最左邊 */ 
        height: 300px; 
        background-color: green; 
        } 
    .box .box-right { 
        float: left; 
        width: 200px; 
        min-height: 100%; 
        margin-left: -200px;/* 設(shè)置浮動， margin-left:負(fù)的自身寬度 可以使元素往上移一行，并且移動到最右邊 */ 
        background-color: pink; 
        } 
    header,footer { height: 75px; background-color: aqua; } 
style> 
head>
<body> 
    <header> header> 
    <div class="box"> 
        <div class="box-content">
            <div class="child">
                中間主題內(nèi)容
            div>
        div>
        <div class="box-left">
            11dsdasdas不你弟弟呢多帶帶
        div>
        <div class="box-right">
            12酷酷酷酷酷的的是計算機(jī)技術(shù)升級的歷史記錄
        div> 
    div>
    <footer>

    footer>
body>
html>

　　　1.2 其實(shí)只是簡單的中間內(nèi)容自適應(yīng)，還可以設(shè)置，中間的元素塊狀元素盒子模型為ie下的盒子模型，

　　　　再使用padding也是可以實(shí)現(xiàn)的

<style>
    .box{
        height: 500px;
        background-color: bisque;
        position: relative;
    }
    .box .box-content {
        box-sizing:border-box;
        height: 100%;
        float: left; /* 一定要設(shè)置浮動，要不下面的模塊上不來 */
        width:100%;/* 一定要設(shè)置100%，要不內(nèi)容不夠稱不開整個頁面 */
        /* 默認(rèn)還是整行 */
        padding:0 210px;
        } 
    .box .box-content .child {
          /* 中間模塊空出左右距離，設(shè)置浮動 */
        background-color: blue; 
        height: 100%;
    }
    .box .box-left { 
        width: 200px; float: left; 
        margin-left: -100%; /* 設(shè)置浮動， margin-left:-100% 可以使元素往上移一行，并且移動到最左邊 */ 
        height: 300px; 
        background-color: green; 
        } 
    .box .box-right { 
        float: left; 
        width: 200px; 
        min-height: 100%; 
        margin-left: -200px;/* 設(shè)置浮動， margin-left:負(fù)的自身寬度 可以使元素往上移一行，并且移動到最右邊 */ 
        background-color: pink; 
        } 
    header,footer { height: 75px; background-color: aqua; } 
style> 
<body> 
    <header> header> 
    <div class="box"> 
        <div class="box-content">
            <div class="child">
                中間主題內(nèi)容
            div>
        div>
        <div class="box-left">
            11dsdasdas不你弟弟呢多帶帶
        div>
        <div class="box-right">
            12酷酷酷酷酷的的是計算機(jī)技術(shù)升級的歷史記錄
        div> 
    div>
    <footer>

    footer>
body>

　　2，上面其實(shí)是圣杯布局，我們再使用中間相對定位，左右兩邊絕對定位（中間絕對定位，不設(shè)置寬度撐不開容器）

　　　　其實(shí)只要中間的位子對應(yīng)了，左右兩邊不管是相對定位，還是絕對定位都可以

　　　　重點(diǎn)當(dāng)然還是中間怎么取定位（元素順序沒有關(guān)系）

　　　　如果中間取相對定位，不設(shè)置浮動，設(shè)置margin 空出左右距離，

　　　　兩邊取絕對定位，只要設(shè)置top:0 一個left:0 一個right:0

DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>三列布局title>
    <style>
    .box{
        height: 500px;
        background-color: bisque;
        position: relative;
        overflow: hidden;
    }
    .box .box-content {
        position: relative;
        height: 100%;
        margin-left: 210px;
        margin-right: 210px;
        background-color: blue;
    } 
    .box .box-left { 
        width: 200px; 
        position: absolute; 
        height: 300px; 
        left: 0;
        top:0;
        background-color: green; 
    } 
    .box .box-right { 
        width: 200px; 
        position: absolute; 
        min-height: 100%; 
        right: 0px;
        top:0;
        background-color: pink; 
    } 
    header,footer { height: 75px; background-color: aqua; } 
style> 
head>
<body> 
    <header> header> 
    <div class="box"> 
        <div class="box-content">
            <div class="child">
                中間主題內(nèi)容asdasdasdsadsasda嘎達(dá)可根但是薩嘎薩嘎?lián)⒗锞蛪蛄思按砩探夥怕?
絲釘結(jié)案率放假啊了解
            div>
        div>
        <div class="box-left">
            11dsdasdas不你弟弟呢多帶帶
        div>
        <div class="box-right">
            12酷酷酷酷酷的的是計算機(jī)技術(shù)升級的歷史記錄
        div> 
    div>
    <footer>

    footer>
body>
html>

　　3.我們再看下使用定位的雙飛燕布局，雙飛燕，要對父容器設(shè)置padding ,大小等一左右固定寬度

　　左右兩邊據(jù)對定位，就這個和上面的方法差不多，我們一起看看左右兩邊相對定位

　　如果左右兩邊相對定位，設(shè)置margin和和left

DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>三列布局title>
    <style>
    .box{
        height: 500px;
        background-color: bisque;
        position: relative;
        overflow: hidden;
        padding: 0 210px;
    }
    .box .box-content {
        height: 100%;
        float: left;
        background-color: blue;
    } 
    .box .box-left { 
        width: 200px; 
        position: relative; 
        height: 300px; 
        float: left;
        left: -210px;
        margin-left: -100%;
        background-color: green; 
    } 
    .box .box-right { 
        width: 200px; 
        position: relative; 
        min-height: 100%; 
        float: left;
        margin-left: -200px;
        right: -210px;
        background-color: pink; 
    } 
    header,footer { height: 75px; background-color: aqua; } 
style> 
head>
<body> 
    <header> header> 
    <div class="box"> 
        <div class="box-content">
            夠了及代理商解放螺絲釘結(jié)案率放假啊了解多嘎多gags廣東省水水水水水水水水水水
水水頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂
        div>
        <div class="box-left">
            11dsdasdas不你弟弟呢多帶帶
        div>
        <div class="box-right">
            12酷酷酷酷酷的的是計算機(jī)技術(shù)升級的歷史記錄
        div> 
    div>
    <footer>

    footer>
body>
html>

　　4.是用flex實(shí)現(xiàn)三列布局，左右固定中間自適應(yīng)，父元素設(shè)置display: flex, 左右分別設(shè)置flex: 0 0 200px ，父元素為display:flex

　　　　那么子元素的float、clear和vertical-align屬性將失效，兼容性有問題，一般都用于移動端

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三列布局title>
    <style>
        .box{
            height: 500px;
            background-color: bisque;
            position: relative;
            display: flex;
        }
                 
                                                                                                                    
                         云服務(wù)器
                                             
                         GPU云服務(wù)器
                                                                                                                                                 
                                      
                     
                    
                                                                                               extjs三列式布局
                                                                                                           java中各種布局
                                                                                                           css布局
                                                                                                           css布局教程

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/981.html

發(fā)表評論

登陸后可評論

0條評論

番茄西紅柿

男|高級講師

我要關(guān)注我要私信

TA的文章

tensor

閱讀 730·2023-04-25 19:43
Windows 下安裝 XGBoost

閱讀 3974·2021-11-30 14:52
Hadoop 2.6.0 啟動問題 lib/native/libhadoop.so which mi

閱讀 3801·2021-11-30 14:52
VmShell：黑五美國VPS,免費(fèi)先開通測試,滿意后付款!支持tiktok美區(qū)

閱讀 3865·2021-11-29 11:00
百度智能云：云產(chǎn)品特惠福利,1核2G輕量應(yīng)用服務(wù)器僅48元/年

閱讀 3796·2021-11-29 11:00
Linux系統(tǒng)和寶塔面板如何啟用禁ping功能?

閱讀 3894·2021-11-29 11:00
301重定向怎么做?301重定向設(shè)置方法有幾種

閱讀 3571·2021-11-29 11:00
wordpress網(wǎng)站重定向次數(shù)過多的解決方法

閱讀 6154·2021-11-29 11:00

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

css常見的各種布局下----三列布局

相關(guān)文章