css左固定右自適應常用方法

chengjianhua 發布于2019-04-23 13:40 / 2887人閱讀

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

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

html:

<div class="demo">
<div class="sidebar">我是固定的div>
<div class="content">我是自適應的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設置為1，自動伸展，此處注意flex兼容性，可以通postcss等后處理器自動加上前綴）

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

效果圖如下：

云服務器 GPU云服務器 css自適應 css圖片自適應 asp 自適應css query常用方法

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

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

CSS布局——左定寬度右自適應寬度并且等高布局

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

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

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

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

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

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

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

pinecone 2019-08-29 15:33 評論0 收藏0