關于幾種自適應布局

songjz 發布于2019-08-30 15:54 / 3077人閱讀

摘要：即自適應寬度元素定義一個父標簽，并設置屬性為為自適應寬度元素設置，應定寬元素寬度固定寬度元素設置屬性為負值除此之外應注意結構中應先寫自適應元素，再寫固定寬度元素。

類型一 1，左右兩側，左側固定寬度200px，右側自適應占滿 代碼如下






左右兩側，左側固定寬度200px，右側自適應占滿




    
    







左右兩側，左側固定寬度200px，右側自適應占滿

運行結果

類型二 2，左中右三列左右固定200px 中間自適應占滿 代碼如下






左中右三列 左右固定200px 中間自適應占滿

運行結果

類型三 3，上中下三行頭部200px高底部200px高中間自適應占滿 代碼如下






上中下三行 頭部200px高 底部200px高 中間自適應占滿

運行結果

總結

固定寬度元素設置float屬性為left,自適應元素設置margin屬性，margin-left應>=定寬元素寬度。

即

自適應寬度元素定義一個父標簽，并設置float屬性為left；width為100%；自適應寬度元素設置margin，margin-left應>=定寬元素寬度；

固定寬度元素設置margin-left屬性為負值：-100%；

除此之外應注意HTML結構中應先寫自適應元素，再寫固定寬度元素。

GPU云服務器云服務器幾種方式幾種備案 js分幾種網絡專線有幾種

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

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

關于幾種自適應布局

摘要：即自適應寬度元素定義一個父標簽，并設置屬性為為自適應寬度元素設置，應定寬元素寬度固定寬度元素設置屬性為負值除此之外應注意結構中應先寫自適應元素，再寫固定寬度元素。類型一 1，左右兩側，左側固定寬度200px，右側自適應占滿代碼如下左右兩側，左側固定寬度200px，右側自適應占滿 .box{ width:600px; height:500px; ...

Honwhy 2019-08-02 10:53 評論0 收藏0
基于float的幾種布局

摘要：在這里介紹基于的幾種布局浮動與兩側自適應的布局如圖所示，左邊沒有限定寬度，右邊寬度自適應。使用實現的布局，可以適用于兩欄的布局。單側固定的布局單側固定的布局分為固定布局和流體布局。在這里介紹基于float的幾種布局. 1.浮動與兩側自適應的布局如圖所示，左邊沒有限定寬度，右邊寬度自適應。使用table-cell實現的布局，可以適用于兩欄的布局。showImg(https://seg...

Freelander 2019-08-29 11:03 評論0 收藏0
自適應頁面的實現方式

摘要：頁面自適應自適應是指頁面內容自動適應屏幕大小，實現自適應的方法有多種簡易場景實現自適應浮動頁面居中元素寬度不寫固定而設置百分比自動匹配大小。后面詳細介紹柵格系統的實現方式。當頁面寬度發生改變時，每個柵格的大小會自動調整以適應頁面尺寸。頁面自適應自適應是指頁面內容自動適應屏幕大小，實現自適應的方法有多種： 1.簡易場景實現自適應：浮動、頁面居中、元素寬度不寫固定而設置百分比自動匹配大...

molyzzx 2019-08-29 16:07 評論0 收藏0
自適應頁面的實現方式

摘要：頁面自適應自適應是指頁面內容自動適應屏幕大小，實現自適應的方法有多種簡易場景實現自適應浮動頁面居中元素寬度不寫固定而設置百分比自動匹配大小。后面詳細介紹柵格系統的實現方式。當頁面寬度發生改變時，每個柵格的大小會自動調整以適應頁面尺寸。頁面自適應自適應是指頁面內容自動適應屏幕大小，實現自適應的方法有多種： 1.簡易場景實現自適應：浮動、頁面居中、元素寬度不寫固定而設置百分比自動匹配大...

omgdog 2019-08-02 11:01 評論0 收藏0