成人欧美一区二区三区的电影,日韩一级一欧美一级国产,国产成人国拍亚洲精品,无码人妻精品一区二区三区毛片,伊人久久无码大香线蕉综合

LOGO OA教程 ERP教程 模切知識(shí)交流 PMS教程 CRM教程 開(kāi)發(fā)文檔 其他文檔  
 
網(wǎng)站管理員

如何實(shí)現(xiàn)兩欄布局,右側(cè)自適應(yīng)?三欄布局中間自適應(yīng)呢?

freeflydom
2025年10月14日 15:20 本文熱度 888

 

一、背景

在日常布局中,無(wú)論是兩欄布局還是三欄布局,使用的頻率都非常高

兩欄布局

兩欄布局實(shí)現(xiàn)效果就是將頁(yè)面分割成左右寬度不等的兩列,寬度較小的列設(shè)置為固定寬度,剩余寬度由另一列撐滿,

比如 Ant Design 文檔,藍(lán)色區(qū)域?yàn)橹饕獌?nèi)容布局容器,側(cè)邊欄為次要內(nèi)容布局容器

這里稱寬度較小的列父元素為次要布局容器,寬度較大的列父元素為主要布局容器

這種布局適用于內(nèi)容上具有明顯主次關(guān)系的網(wǎng)頁(yè)

三欄布局

三欄布局按照左中右的順序進(jìn)行排列,通常中間列最寬,左右兩列次之

大家最常見(jiàn)的就是github

二、兩欄布局

兩欄布局非常常見(jiàn),往往是以一個(gè)定寬欄和一個(gè)自適應(yīng)的欄并排展示存在

實(shí)現(xiàn)思路也非常的簡(jiǎn)單:

  • 使用 float 左浮左邊欄

  • 右邊模塊使用 margin-left 撐出內(nèi)容塊做內(nèi)容展示

  • 為父級(jí)元素添加BFC,防止下方元素飛到上方內(nèi)容

代碼如下:

<style>
    .box{
        overflow: hidden; 添加BFC
    }
    .left {
        float: left;
        width: 200px;
        background-color: gray;
        height: 400px;
    }
    .right {
        margin-left: 210px;
        background-color: lightgray;
        height: 200px;
    }
</style>
<div class="box">
    <div class="left">左邊</div>
    <div class="right">右邊</div>
</div>

還有一種更為簡(jiǎn)單的使用則是采取:flex彈性布局

flex彈性布局

<style>
    .box{
        display: flex;
    }
    .left {
        width: 100px;
    }
    .right {
        flex: 1;
    }
</style>
<div class="box">
    <div class="left">左邊</div>
    <div class="right">右邊</div>
</div>

flex可以說(shuō)是最好的方案了,代碼少,使用簡(jiǎn)單

注意的是,flex容器的一個(gè)默認(rèn)屬性值:align-items: stretch;

這個(gè)屬性導(dǎo)致了列等高的效果。 為了讓兩個(gè)盒子高度自動(dòng),需要設(shè)置: align-items: flex-start

三、三欄布局

實(shí)現(xiàn)三欄布局中間自適應(yīng)的布局方式有:

  • 兩邊使用 float,中間使用 margin

  • 兩邊使用 absolute,中間使用 margin

  • 兩邊使用 float 和負(fù) margin

  • display: table 實(shí)現(xiàn)

  • flex實(shí)現(xiàn)

  • grid網(wǎng)格布局

兩邊使用 float,中間使用 margin

需要將中間的內(nèi)容放在html結(jié)構(gòu)最后,否則右側(cè)會(huì)臣在中間內(nèi)容的下方

實(shí)現(xiàn)代碼如下:

<style>
    .wrap {
        background: #eee;
        overflow: hidden; <!-- 生成BFC,計(jì)算高度時(shí)考慮浮動(dòng)的元素 -->
        padding: 20px;
        height: 200px;
    }
    .left {
        width: 200px;
        height: 200px;
        float: left;
        background: coral;
    }
    .right {
        width: 120px;
        height: 200px;
        float: right;
        background: lightblue;
    }
    .middle {
        margin-left: 220px;
        height: 200px;
        background: lightpink;
        margin-right: 140px;
    }
</style>
<div class="wrap">
    <div class="left">左側(cè)</div>
    <div class="right">右側(cè)</div>
    <div class="middle">中間</div>
</div>

原理如下:

  • 兩邊固定寬度,中間寬度自適應(yīng)。

  • 利用中間元素的margin值控制兩邊的間距

  • 寬度小于左右部分寬度之和時(shí),右側(cè)部分會(huì)被擠下去

這種實(shí)現(xiàn)方式存在缺陷:

  • 主體內(nèi)容是最后加載的。

  • 右邊在主體內(nèi)容之前,如果是響應(yīng)式設(shè)計(jì),不能簡(jiǎn)單的換行展示

兩邊使用 absolute,中間使用 margin

基于絕對(duì)定位的三欄布局:注意絕對(duì)定位的元素脫離文檔流,相對(duì)于最近的已經(jīng)定位的祖先元素進(jìn)行定位。無(wú)需考慮HTML中結(jié)構(gòu)的順序

<style>
  .container {
    position: relative;
  }
  
  .left,
  .right,
  .main {
    height: 200px;
    line-height: 200px;
    text-align: center;
  }
  .left {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    background: green;
  }
  .right {
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    background: green;
  }
  .main {
    margin: 0 110px;
    background: black;
    color: white;
  }
</style>
<div class="container">
  <div class="left">左邊固定寬度</div>
  <div class="right">右邊固定寬度</div>
  <div class="main">中間自適應(yīng)</div>
</div>

實(shí)現(xiàn)流程:

  • 左右兩邊使用絕對(duì)定位,固定在兩側(cè)。

  • 中間占滿一行,但通過(guò) margin和左右兩邊留出10px的間隔

兩邊使用 float 和負(fù) margin

<style>
  .left,
  .right,
  .main {
    height: 200px;
    line-height: 200px;
    text-align: center;
  }
  .main-wrapper {
    float: left;
    width: 100%;
  }
  .main {
    margin: 0 110px;
    background: black;
    color: white;
  }
  .left,
  .right {
    float: left;
    width: 100px;
    margin-left: -100%;
    background: green;
  }
  .right {
    margin-left: -100px; /* 同自身寬度 */
  }
</style>
<div class="main-wrapper">
  <div class="main">中間自適應(yīng)</div>
</div>
<div class="left">左邊固定寬度</div>
<div class="right">右邊固定寬度</div>

實(shí)現(xiàn)過(guò)程:

  • 中間使用了雙層標(biāo)簽,外層是浮動(dòng)的,以便左中右能在同一行展示

  • 左邊通過(guò)使用負(fù) margin-left:-100%,相當(dāng)于中間的寬度,所以向上偏移到左側(cè)

  • 右邊通過(guò)使用負(fù) margin-left:-100px,相當(dāng)于自身寬度,所以向上偏移到最右側(cè)

缺點(diǎn):

  • 增加了 .main-wrapper 一層,結(jié)構(gòu)變復(fù)雜

  • 使用負(fù) margin,調(diào)試也相對(duì)麻煩

使用 display: table 實(shí)現(xiàn)

<table> 標(biāo)簽用于展示行列數(shù)據(jù),不適合用于布局。但是可以使用 display: table 來(lái)實(shí)現(xiàn)布局的效果

<style>
  .container {
    height: 200px;
    line-height: 200px;
    text-align: center;
    display: table;
    table-layout: fixed;
    width: 100%;
  }
  .left,
  .right,
  .main {
    display: table-cell;
  }
  .left,
  .right {
    width: 100px;
    background: green;
  }
  .main {
    background: black;
    color: white;
    width: 100%;
  }
</style>
<div class="container">
  <div class="left">左邊固定寬度</div>
  <div class="main">中間自適應(yīng)</div>
  <div class="right">右邊固定寬度</div>
</div>

實(shí)現(xiàn)原理:

  • 層通過(guò) display: table設(shè)置為表格,設(shè)置 table-layout: fixed`表示列寬自身寬度決定,而不是自動(dòng)計(jì)算。

  • 內(nèi)層的左中右通過(guò) display: table-cell設(shè)置為表格單元。

  • 左右設(shè)置固定寬度,中間設(shè)置 width: 100% 填充剩下的寬度

使用flex實(shí)現(xiàn)

利用flex彈性布局,可以簡(jiǎn)單實(shí)現(xiàn)中間自適應(yīng)

代碼如下:

<style type="text/css">
    .wrap {
        display: flex;
        justify-content: space-between;
    }
    .left,
    .right,
    .middle {
        height: 100px;
    }
    .left {
        width: 200px;
        background: coral;
    }
    .right {
        width: 120px;
        background: lightblue;
    }
    .middle {
        background: #555;
        width: 100%;
        margin: 0 20px;
    }
</style>
<div class="wrap">
    <div class="left">左側(cè)</div>
    <div class="middle">中間</div>
    <div class="right">右側(cè)</div>
</div>

實(shí)現(xiàn)過(guò)程:

  • 僅需將容器設(shè)置為display:flex;,

  • 盒內(nèi)元素兩端對(duì)其,將中間元素設(shè)置為100%寬度,或者設(shè)為flex:1,即可填充空白

  • 盒內(nèi)元素的高度撐開(kāi)容器的高度

優(yōu)點(diǎn):

  • 結(jié)構(gòu)簡(jiǎn)單直觀

  • 可以結(jié)合 flex的其他功能實(shí)現(xiàn)更多效果,例如使用 order屬性調(diào)整顯示順序,讓主體內(nèi)容優(yōu)先加載,但展示在中間

grid網(wǎng)格布局

代碼如下:

<style>
    .wrap {
        display: grid;
        width: 100%;
        grid-template-columns: 300px auto 300px;
    }
    .left,
    .right,
    .middle {
        height: 100px;
    }
    .left {
        background: coral;
    }
    .right {
        background: lightblue;
    }
    .middle {
        background: #555;
    }
</style>
<div class="wrap">
    <div class="left">左側(cè)</div>
    <div class="middle">中間</div>
    <div class="right">右側(cè)</div>
</div>

flex彈性布局一樣的簡(jiǎn)單

轉(zhuǎn)自https://www.cnblogs.com/smileZAZ/p/18226250

 


該文章在 2025/10/14 15:22:07 編輯過(guò)
關(guān)鍵字查詢
相關(guān)文章
正在查詢...
點(diǎn)晴ERP是一款針對(duì)中小制造業(yè)的專業(yè)生產(chǎn)管理軟件系統(tǒng),系統(tǒng)成熟度和易用性得到了國(guó)內(nèi)大量中小企業(yè)的青睞。
點(diǎn)晴PMS碼頭管理系統(tǒng)主要針對(duì)港口碼頭集裝箱與散貨日常運(yùn)作、調(diào)度、堆場(chǎng)、車隊(duì)、財(cái)務(wù)費(fèi)用、相關(guān)報(bào)表等業(yè)務(wù)管理,結(jié)合碼頭的業(yè)務(wù)特點(diǎn),圍繞調(diào)度、堆場(chǎng)作業(yè)而開(kāi)發(fā)的。集技術(shù)的先進(jìn)性、管理的有效性于一體,是物流碼頭及其他港口類企業(yè)的高效ERP管理信息系統(tǒng)。
點(diǎn)晴WMS倉(cāng)儲(chǔ)管理系統(tǒng)提供了貨物產(chǎn)品管理,銷售管理,采購(gòu)管理,倉(cāng)儲(chǔ)管理,倉(cāng)庫(kù)管理,保質(zhì)期管理,貨位管理,庫(kù)位管理,生產(chǎn)管理,WMS管理系統(tǒng),標(biāo)簽打印,條形碼,二維碼管理,批號(hào)管理軟件。
點(diǎn)晴免費(fèi)OA是一款軟件和通用服務(wù)都免費(fèi),不限功能、不限時(shí)間、不限用戶的免費(fèi)OA協(xié)同辦公管理系統(tǒng)。
Copyright 2010-2025 ClickSun All Rights Reserved