有關于css的四種布局

Steve_Wang_ 發布于2019-08-30 15:54 / 667人閱讀

摘要：四種布局左右兩側，左側固定寬度，右側自適應占滿。上中下三行，頭部高，底部高，中間自適應占滿。上下兩部分，底下這個固定高度，如果上面的內容少，那么這個就固定在底部，如果內容多，就把擠著往下走。代碼如下布局若有錯誤請及時通知

四種布局

（1）、左右兩側，左側固定寬度200px，

右側自適應占滿。

（2）、左中右三列，左右個200px固定，中間自適應占滿。

（3）、上中下三行，頭部200px高，底部200px高，中間自適應占滿。

（4）、上下兩部分，底下這個固定高度200px，如果上面的內容少，那么這個footer就固定在底部，如果內容多，就把footer擠著往下走。

一、第一種

圖片如下：（左右兩側，左側固定寬度200px，右側自適應占滿）

代碼如下：



    
        
        布局1

.first,.second{height:100px;}
.first{
    width:200px;
    background-color:yellow;
    float:left;
    
}
.second{
    
    background-color:red;
    position:absolute;
    right:0px;
    left:200px;
    width:100%;
}x

二、第二種

圖片如下：（上中下三行，頭部200px高，底部200px高，中間自適應占滿）

代碼如下：



    
        
        布局2

.left,.center,.right{height:400px;}
.left{
    width:200px;
    background-color:yellow;
    float:left;
    
}
.center{
    
    background-color:red;
    position:absolute;
    right:200px;
    left:200px;
    
}
.right{
    width:200px;
    float:right;
    background-color:green;
    
}

三、第三種

圖片如下：上中下三行，頭部200px高，底部200px高，中間自適應占滿

代碼如下：



    
        
        布局3

body{margin:0px;}

.top{
    width:100%;
    height:200px;
    position:absolute;
    background:red;
}    
.center{
    width:100%;
    
    position:absolute;
    background:blue;
    top:200px;
    bottom:200px;
}    
.bottom{
    width:100%;
    height:200px;
    position:absolute;
    bottom:0px;
    
    background:black;
}

四、第四種

圖片如下：上下兩部分，底下這個固定高度200px，如果上面的內容少，那么這個bottom就固定在底部，如果內容多，就把bottom擠著往下走。

代碼如下：



    
        
        布局4
        
    
    
    
    
    aijefoaiejfoaiejfaio

    ........

html{
    height:100%;
}
body{
    margin:0px;
    min-height:100%;
    position:relative;
    
    background:red;
}

.top{
    padding-bottom:300px;
    
}

.bottom{
    position:absolute;
    width:100%;
    height:200px;
    background:black;
    bottom:0px;
    left:0px;
}

若有錯誤請及時通知

GPU云服務器云服務器 activity的四種狀態數據遷移的四種方法對數據倉庫分析的四種方式 java中線程的四種狀態

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

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

有關于css的四種布局

摘要：四種布局左右兩側，左側固定寬度，右側自適應占滿。上中下三行，頭部高，底部高，中間自適應占滿。上下兩部分，底下這個固定高度，如果上面的內容少，那么這個就固定在底部，如果內容多，就把擠著往下走。代碼如下布局若有錯誤請及時通知四種布局（1）、左右兩側，左側固定寬度200px，右側自適應占滿。（2）、左中右三列，左右個200px固定，中間自適應占滿。（3）、上中下三行，頭部200p...

khs1994 2019-08-02 10:55 評論0 收藏0
CSS三欄布局的四種方法

摘要：浮動代碼如下注意元素次序代碼如下左欄左浮動中間自適應右欄右浮動這種方式代碼足夠簡潔與高效，也容易理解后記四種方法其實只有圣杯布局和雙飛翼布局較難理解，但實際上理解了圣杯布局，雙飛翼布局自然就理解了。前言總括：不管是三欄布局還是兩欄布局都是我們在平時項目里經常使用的，也許你不知道什么事三欄布局什么是兩欄布局但實際已經在用，或許你知道三欄布局的一種或兩種方法，但實際操作中也只會依賴那...

RobinQu 2019-08-30 13:14 評論0 收藏0
vue移動端h5頁面根據屏幕適配的四種方案

摘要：在移動端頁面當中，其中適配是經常會遇到的問題，這塊主要有死個方法可以適用。目前全網找或者是嘗試來看，確實沒有一個十全十美的適配的解決方案，只能不斷在實踐應用當中慢慢填坑最近做了兩個關于h5頁面對接公眾號的項目，不得不提打開微信瀏覽器內置地圖導航的功能確實有點惡心。下次想起來了的話，進行總結分享一下如何處理。在vue移動端h5頁面當中，其中適配是經常會遇到的問題，這塊主要有死個方法可以適用。 ...

番茄西紅柿 2019-04-23 13:18 評論0 收藏0
css清除浮動常用的四種方法實現

摘要：用這種方法清除浮動，會為文檔中增加不必要的結構，不推薦。可以包含浮動元素，所以能實現撐起高度的效果。以上是常用的幾種方法，可以根據場景的不同選擇適合的。在頁面布局中經常會用到浮動和清除浮動的操作，但之前是知其然而不知其所以然，看過多篇文章后，有了一些深入的了解，特整理下來！浮動的目的：最初設計浮動的目的是為了實現文字等內容可圍繞圖像顯示，后來發現浮動方便布局，所以支持浮動任何元素...

iliyaku 2019-08-29 16:14 評論0 收藏0
茴字的四種寫法—移動適配方案的進化

摘要：是阿里團隊開發的前端適配方案，也是用的的方法。那么第一種方法其實已經能解決前端適配問題了，為什么阿里還要開發一個呢在第一種方法中，時沒有任何問題，但是在或者更高的手機屏幕上，因為物理像素的增加，存在小于的顯示空間。話說我剛工作的時候，就開始用rem了，過了沒多久，接觸到了flexible，系統化且支持iOS的retina屏迅速征服了我，最近又看到了大漠大神的vw。所以本文想完成一篇一...

canger 2019-08-22 16:12 評論0 收藏0