css左固定右自適應(yīng)常用方法

chengjianhua 發(fā)布于2019-04-23 13:40 / 2901人閱讀

摘要：下面是幾種方法的公用部分右自適應(yīng)也是一樣的，換一下方向我是固定的我是自適應(yīng)的左脫離文檔流，右左左布局左定寬，右設(shè)置為，自動(dòng)伸展，此處注意兼容性，可以通等后處理器自動(dòng)加上前綴效果圖如下

下面是幾種方法的公用部分（右自適應(yīng)也是一樣的，換一下方向）

html:

<div class="demo">
<div class="sidebar">我是固定的div>
<div class="content">我是自適應(yīng)的div>
div>

css:

.sidebar,.content{
height: 300px;
}
.sidebar{
background-color: red;
width: 300px;
}
.content{
background-color: green;
}

?1. 左脫離文檔流，右margin

? ? 1.1 左float

        .demo .sidebar{
            float: left;
        }
        .demo .content{
            margin-left: 310px;
        }

? ? 1.2 左absolute

        .sidebar{
            position: absolute;
            top: 0;
            left: 0;
        }
        .content{
            margin-left: 310px;
        }

2. flex布局（左定寬，右flex設(shè)置為1，自動(dòng)伸展，此處注意flex兼容性，可以通postcss等后處理器自動(dòng)加上前綴）

        .demo{
            display: flex;
        }
        .sidebar{
            width: 300px;
            margin-right:10px;
        }
        .content{
            flex: 1;
        }

效果圖如下：

云服務(wù)器 GPU云服務(wù)器 css自適應(yīng) css圖片自適應(yīng) asp 自適應(yīng)css query常用方法

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

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

相關(guān)文章

CSS布局——左定寬度右自適應(yīng)寬度并且等高布局

摘要：今天有位朋友一早從妙味課堂轉(zhuǎn)來一個(gè)有關(guān)于布局的面試題，需要解決，花了點(diǎn)時(shí)間寫了幾個(gè)放上來與大家分享受。今天有位朋友一早從妙味課堂轉(zhuǎn)來一個(gè)有關(guān)于CSS布局的面試題，需要解決，花了點(diǎn)時(shí)間寫了幾個(gè)DEMO,放上來與大家分享受。那么我們?cè)诳碊EMO之前一起先來看看這個(gè)面試題的具體要求吧：左側(cè)固定寬，右側(cè)自適應(yīng)屏幕寬；左右兩列，等高布局；左右兩列要求有最小高度，例如：200px;（當(dāng)內(nèi)容超出...

dreamtecher 2019-08-29 12:43 評(píng)論0 收藏0
常見的面試問題：【CSS】已知高度，寫出三欄布局

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

MobService 2019-08-02 15:33 評(píng)論0 收藏0
三欄布局（一）-------左右寬高固定，中間自適應(yīng)

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

Aldous 2019-04-23 13:08 評(píng)論0 收藏0
CSS3中display屬性的Flex布局-圣杯布局實(shí)例

摘要：負(fù)值對(duì)該屬性無效。我們通常用到的就是這個(gè)屬性，在布局的時(shí)候會(huì)很有用。對(duì)于這個(gè)屬性，最好是手動(dòng)敲一下，嘗試一下各種值出現(xiàn)的效果。三圣杯布局布局一直是很重要的知識(shí)點(diǎn)，在面試中也會(huì)經(jīng)常遇到，這里就用做一個(gè)圣杯布局。一，為什么寫這篇文章在很早之前就接觸display：flex布局，尤其是不考慮低版本瀏覽器兼容之后，就開始肆無忌憚的使用了。之前做pc端的時(shí)候，要求兼容到ie8，也不會(huì)注意到它...

pinecone 2019-08-29 15:33 評(píng)論0 收藏0