欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

css實現(xiàn)兩欄布局，左側(cè)固定寬，右側(cè)自適應的多種方法

  發(fā)布時間：2021-08-04 14:32:21   作者：小萌在線敲打   我要評論
今天通過7種方法給大家介紹css實現(xiàn)兩欄布局，左側(cè)固定寬，右側(cè)自適應效果，每種方法通過實例代碼給大家介紹的非常詳細，需要的朋友參考下吧

css實現(xiàn)兩欄布局，左側(cè)固定寬，右側(cè)自適應的7種方法，代碼如下所示：

 1、利用 calc 計算寬度的方法 css代碼:

.box>div{height: 100%;}
#box1>div{float: left;}
.left1{width: 100px;background: yellow;}
.right1{background: #09c;width:calc(100% - 100px);}

dom結(jié)構:

<div class="box" id="box1">
    <div class="left1">左側(cè)定寬</div>
    <div class="right1">右側(cè)自適應</div>
</div>

2、利用 float 配合 margin 實現(xiàn) css代碼:

.box{overflow: hidden;height: 100px;margin: 10px 0;}
.box>div{height: 100%;}
.left2{float: left;background: yellow;width: 100px;}
.right2{background: #09c;margin-left: 100px;}

dom結(jié)構:

<div class="box" id="box2">
    <div class="left2">左側(cè)定寬</div>
    <div class="right2">右側(cè)自適應</div>
</div>

3、利用 float 配合 overflow 實現(xiàn) css代碼:

.box{overflow: hidden;height: 100px;margin: 10px 0;}
.box>div{height: 100%;}
.left3{float: left;background: yellow;width: 100px;}
.right3{background: #09c;overflow: hidden;}

dom結(jié)構:

<div class="box" id="box3">
    <div class="left3">左側(cè)定寬</div>
    <div class="right3">右側(cè)自適應</div>
</div>

4、利用 position:absolute 配合 margin 實現(xiàn)

css代碼:

.box{overflow: hidden;height: 100px;margin: 10px 0;}
.box>div{height: 100%;}
#box4{position: relative;}
.left4{position: absolute;left: 0;top:0;width: 100px;background: yellow;}
.right4{margin-left:100px;background: #09c;}

dom結(jié)構:

<div class="box" id="box4">
    <div class="left4">左側(cè)定寬</div>
    <div class="right4">右側(cè)自適應</div>
</div>

5、利用 position:absolute 實現(xiàn)

css代碼:

.box{overflow: hidden;height: 100px;margin: 10px 0;}
.box>div{height: 100%;}
#box5{position: relative;}
.left5{position: absolute;left: 0;top:0;width: 100px;background: yellow;}
.right5{position: absolute;left: 100px;top:0;right: 0;width: 100%;background: #09c;}

dom結(jié)構：

<div class="box" id="box5">
    <div class="left5">左側(cè)定寬</div>
    <div class="right5">右側(cè)自適應</div>
</div>

6、利用 display: flex 實現(xiàn)

css代碼：

.box{overflow: hidden;height: 100px;margin: 10px 0;}
.box>div{height: 100%;}
#box6{display: flex;display: -webkit-flex;}
.left6{flex:0 1 100px;background: yellow;}
.right6{flex:1;background: #09c;}

dom結(jié)構：

<div class="box" id="box6">
    <div class="left6">左側(cè)定寬</div>
    <div class="right6">右側(cè)自適應</div>
</div>

7、利用 display: table 實現(xiàn) css代碼：

.box{overflow: hidden;height: 100px;margin: 10px 0;}
.box>div{height: 100%;}
#box7{display: table;width: 100%;}
#box7>div{display: table-cell;}
.left7{width: 100px;background: yellow;}
.right7{background: #09c;}

dom結(jié)構：

<div class="box" id="box7">
    <div class="left7">左側(cè)定寬</div>
    <div class="right7">右側(cè)自適應</div>
</div>

到此這篇關于css實現(xiàn)兩欄布局，左側(cè)固定寬，右側(cè)自適應的7中方法的文章就介紹到這了,更多相關css兩欄布局內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！

相關文章

  • css display table 自適應高度、寬度問題的解決

    這篇文章主要介紹了css display table 自適應高度、寬度問題的解決，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著
    2021-05-07

  • 詳解CSS多種三列自適應布局實現(xiàn)

    這篇文章主要介紹了詳解CSS多種三列自適應布局實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習
    2021-02-24

  • CSS實現(xiàn)背景圖片屏幕自適應的實現(xiàn)

    這篇文章主要介紹了CSS實現(xiàn)背景圖片屏幕自適應的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學
    2020-12-07

  • css3實現(xiàn)自適應瀏覽器圖片布局特效

    css3實現(xiàn)自適應瀏覽器圖片布局特效是一款自適應瀏覽器屏幕的水平列表div容器，好友頭像列表水平布局特效。
    2020-11-23

  • CSS實現(xiàn)表格首行首列固定和自適應窗口的實例代碼

    這篇文章主要介紹了CSS實現(xiàn)表格首行首列固定和自適應窗口的實例代碼,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2020-11-11

  • css實現(xiàn)六種自適應兩欄布局方式

    這篇文章主要介紹了css實現(xiàn)六種自適應兩欄布局方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習
    2020-10-28

  • CSS將img圖片填滿父容器div并自適應容器大小

    這篇文章主要介紹了CSS將img圖片填滿父容器div并自適應容器大小,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編
    2020-10-23

最新評論