經典的流式布局實現方法總結 二

2021-09-10 20:12:04 字數 865 閱讀 5623

昨天總結了經典的流式布局中的左側固定,右側自適應。今天總結一下右側固定左側自適應的三種實現方法。其實,左側固定右側自適應和右側固定左側自適應基本差不多,就是左右換一下。但是,需要強調和注意的是利用bfc塊級格式化上下文, 實現右側固定左側自適應的時候,需要在html結構上讓右盒子在前。

右側固定左側自適應的三種實現方法:

1.利用bfc塊級格式化上下文, 實現右側固定左側自適應

(1) 先從結構上就要讓 右盒子 先右浮

(2)再給 left 左盒子, 新增 overflow: hidden;

具體css**

html結構

//注意: 一定要right 在前

2.利用定位實現右側固定左側自適應

(1) 給父盒子設定padding-right 值

(2) 給右側子盒子設定width = padding-right ,並定位到父盒子的padding-right上.

(3) 左側盒子自適應

具體css**

html結構

3.利用flex布局 實現右側固定左側自適應

(1) 給父盒子設定display:flex ;

(2) 右側盒子設定固定寬高 ,左側盒子設定flex:1 ;

具體css**

html結構

實現瀑布流式布局的幾種方法

1 傳統多列浮動 定義多個div左浮動成多列,在每個div裡插入一推也是左浮動的div。於是就實現了那種參差不齊的效果。2 直接用css3樣式實現 定義乙個div直接設定它的屬性 column count 列數 把那些小塊div放在這個大的div中就能實現這種瀑布流效果。但這種css3屬性在一些低階...

什麼是移動web開發流式布局,具體實現方法是怎樣的

總結 相容移動端主流瀏覽器,處理webkit核心瀏覽器即可。視口寬度和裝置保持一致 視口的預設縮放比例1.0 不允許使用者自行縮放 最大允許的縮放比例1.0 最小允許的縮放比例1.0 物理畫素點指的是螢幕顯示的最小顆粒,是物理真實存在的。這是廠商在出廠時就設定好了,比如蘋果6 是 750 1334 ...

一 CSS實現橫列布局的方法總結

一 使用float實現橫列布局的方法 如下面所示 div1和div2都可以選擇向左或者向右浮動50 來實現展示在同一行 分析 section class active div1 div img id active div11 src div div img id active div12 src d...