CSS布局

CntChen 發(fā)布于2019-08-02 14:27 / 3188人閱讀

摘要：好記性不如爛筆頭一兩列布局部分左側寬度固定，右側寬度自適應關鍵點在于右的設置為左浮動的寬度。左浮動最后實現的效果左側絕對定位右側關鍵點左設置為絕對定位，使得左脫離文檔流，類似于左浮動。

好記性不如爛筆頭~~

一、兩列布局

<--! HTML部分-->
    
        left
        right

左側寬度固定，右側寬度自適應

關鍵點在于：右div的margin-left設置為左浮動div的寬度。

左浮動 + margin-left

.content {
        width: 300px;
        height: 300px;
        background-color: white;
    }
    .left {
        float: left;
        width: 100px;
        height: 100px;
        background-color: #ffff80;
    }
    .right {
        height: 200px;
        margin-left: 100px;
        background-color: #80ff80;
    }

最后實現的效果：

2.左側絕對定位+右側margin-left
關鍵點：左div設置為絕對定位，使得左div脫離文檔流，類似于左浮動。右側div的margin-left設置為左div的寬度

.content {
            width: 300px;
            height: 300px;
            position: relative;//注意：父相子絕定位
            background-color: #ff80c0;
        }
        .left {
            width: 100px;
            height: 100px;
            position: absolute;
            left: 0;//可不用此行代碼
            background-color: #ffff80;
        }
        .right {
            height: 200px;
            margin-left: 100px;
            background-color: #80ff80;
        }

還有一種設置絕對定位的方法：

.right {
            width: 200px;//這種情況要設置右div的寬度
            height: 200px;
            /* margin-left: 100px; */
            position: absolute;//將右div也設置成絕對定位，距離右側的絕對定位
            right: 0;
            background-color: #80ff80;
        }

3.左浮動+margin負值

二、三列布局 三、flex彈性布局

GPU云服務器云服務器 css布局 css布局教程學習css布局 div布局布局html

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

轉載請注明本文地址：http://m.hztianpu.com/yun/53814.html

CSS及布局

摘要：經過半年的打磨，正式發(fā)布，主要是新增了一些常用組件，并使用命名，為接下來的微信小程序開發(fā)做好準備。這兩種方式實現的瀑布流式布局均支持首屏和網頁窗口大小改變時的列數自適應。主要是對于標準里的布局方式草案中的布局方式進行一些總結。一勞永逸的搞定 flex 布局尋根溯源話布局一切都始于這樣一個問題：怎樣通過 CSS 簡單而優(yōu)雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看...

jaysun 2019-08-29 14:04 評論0 收藏0
前端-CSS3&H5

摘要：高度模型淺識為的簡寫，簡稱為塊級格式化上下文，為瀏覽器渲染某一區(qū)域的機制，中只有和中還增加了和。并非所有的布局都會在開發(fā)中使用，但是其中也會涉及一些知識點。然而在不同的純制作各種圖形純制作各種圖形多圖預警一勞永逸的搞定 flex 布局尋根溯源話布局一切都始于這樣一個問題：怎樣通過 CSS 簡單而優(yōu)雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 float 屬性不...

xiaolinbang 2019-08-29 14:14 評論0 收藏0
CSS 常用布局在小程序中的應用

摘要：常用布局在小程序中的應用所有布局的根本都是個基本概念定位浮動外邊距操縱我們其他的布局實現方式，都是基于正常的文檔流來進行的。具體實現，可以使用微信小程序的單位，以及使用定位浮動布局來實現。 CSS 常用布局在小程序中的應用所有css布局的根本都是3個基本概念：定位、浮動、外邊距操縱我們其他的布局實現方式，都是基于正常的文檔流來進行的。所以我們先來看看什么是正常的文檔流。正常文...

garfileo 2019-08-30 11:25 評論0 收藏0
CSS 常用布局在小程序中的應用

摘要：常用布局在小程序中的應用所有布局的根本都是個基本概念定位浮動外邊距操縱我們其他的布局實現方式，都是基于正常的文檔流來進行的。具體實現，可以使用微信小程序的單位，以及使用定位浮動布局來實現。 CSS 常用布局在小程序中的應用所有css布局的根本都是3個基本概念：定位、浮動、外邊距操縱我們其他的布局實現方式，都是基于正常的文檔流來進行的。所以我們先來看看什么是正常的文檔流。正常文...

CoderDock 2019-08-30 15:44 評論0 收藏0
HTML-CSS

摘要：但是，從字體上來說雪碧圖制作，使用以及相關，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標準布局的情況下，回滾到舊版本的，保證移動設備中能呈現出一樣的布局效果。我不想陷入和的紛爭，但是有一件事是確定的極大的提升了移動端一勞永逸的搞定 flex 布局尋根溯源話布局一切都始于這樣一個問題：怎樣通過 CSS 簡單而優(yōu)雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 ...

xiaokai 2019-08-01 18:21 評論0 收藏0