css 布局：兩邊固定中間自適應

Martin91 發布于2019-08-02 11:44 / 3007人閱讀

摘要：解析四種常用方法以及原理浮動浮動內嵌定位。浮動元素高度為，浮動盒子層級比塊級水平盒子高，比水平盒子低。中間元素用，防止內容跑到左右兩塊定位元素下面被遮蓋。我在左邊我在中間，自動占據剩余空間我在右邊原理布局，子元素默認水平排列。

解析四種常用方法以及原理：浮動、浮動內嵌 div、定位、flex。

浮動




    我在左邊
    我在右邊
    我排最后，但是跑到中間來了

原理：

浮動元素和非浮動元素不在同一個立體空間，如果不清浮動，位置在它下面的元素將往上浮。

浮動元素高度為0，浮動盒子層級比 block 塊級水平盒子高，比 inline/inline-block 水平盒子低。

浮動內嵌 div

原理：

三個元素都浮動，其中主題元素沾滿一行 100% ，利用負 margin 把左右兩邊的元素放好。

主題元素里面再套一個子元素，子元素 margin: 0 200px ，防止內容跑到左右兩塊浮動元素下面被遮蓋。

定位




    我在中間，我用 margin 抵消左右兩塊定位元素占據空間
    我在左邊，我是定位元素
    我在右邊，我是定位元素

原理：

左右兩個元素定位，可放任意位置。

中間元素用 margin: 0 200px，防止內容跑到左右兩塊定位元素下面被遮蓋。

flex




    我在左邊
    我在中間，flex: 1 自動占據剩余空間
    我在右邊

原理：

flex 布局，子元素默認水平排列。

flex: 0 1 auto -> 默認，占據空間不跟隨父級放大，跟隨變小，自身本來寬度

flex: 1 1 auto -> auto，占據空間跟隨父級放大，同時跟隨變小，自身本來寬度

flex: 0 0 auto -> none，占據空間不跟隨父級放大，同時也不跟隨變小，自身本來寬度

flex: 1 1 1 -> auto，占據空間跟隨父級放大，同時跟隨變小，并且自動占滿剩余空間

云服務器 GPU云服務器 css自適應 css圖片自適應 asp 自適應css 固定布局

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

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

CSS || 三欄布局，兩邊固定，中間自適應

摘要：實現基于純實現的三欄布局需要將中間的內容放在結構的最后，否則右側會沉在中間內容的下側原理元素浮動后，脫離文檔流，后面的元素受浮動影響，設置受影響元素的值即可兩邊固定寬度，中間寬度自適應。 1 float實現基于純float實現的三欄布局需要將中間的內容放在HTML結構的最后，否則右側會沉在中間內容的下側原理：元素浮動后，脫離文檔流，后面的元素受浮動影響，設置受影響元素的margi...

pcChao 2019-08-29 12:12 評論0 收藏0
css 布局：兩邊固定中間自適應

摘要：解析四種常用方法以及原理浮動浮動內嵌定位。浮動元素高度為，浮動盒子層級比塊級水平盒子高，比水平盒子低。中間元素用，防止內容跑到左右兩塊定位元素下面被遮蓋。我在左邊我在中間，自動占據剩余空間我在右邊原理布局，子元素默認水平排列。解析四種常用方法以及原理：浮動、浮動內嵌 div、定位、flex。浮動 .wrap {background: #eee; padding: 20px...

CoyPan 2019-08-29 17:00 評論0 收藏0
三列布局（左右固定，中間自適應）

1、定位我是左邊，我是固定的我是中間，我是自適應的，左邊右邊都position固定了，他們脫離了文檔流，我終于得到機會擠進中間啦！只要我margin一下就沒人會擋住我啦！我可真是個小機靈鬼(同時，我還是個自由人，我div寫在開頭中間結尾都可以呢) 我是右邊，我也是固定的 *{ margin:0; padding: 0; } .l...

aboutU 2019-08-29 17:23 評論0 收藏0
css常見的各種布局下----三列布局

css 三列布局，左右固定寬度右邊自適應　　1不使用定位，只使用浮動可以實現左右固定，中間寬度自適應布局　　　　　1.1.1 自適應部分一定要放第一個位子，使用浮動，并且設置寬度為100%，不設置浮動元素內容不夠稱不開整個寬度　　　　　1.1.2 左右固定部位，使用margin-left :負數，使其左右靠齊　　　　　1.1.3 中間自適應部分嵌套一個div，設置m...

番茄西紅柿 2019-04-23 10:21 評論0 收藏0
css常見的各種布局下----三列布局

摘要：三列布局，左右固定寬度右邊自適應不使用定位，只使用浮動可以實現左右固定，中間寬度自適應布局自適應部分一定要放第一個位子，使用浮動，并且設置寬度為，不設置浮動元素內容不夠稱不開整個寬度左右固定部位，使用負數，使其左右靠齊中間自適應部分嵌套一css 三列布局，左右固定寬度右邊自適應 1不使用定位，只使用浮動可以實現左右固定，中間寬度自適應布局 1.1.1 自適應部分一定要放第一個位子，使...

tigerZH 2019-04-22 17:02 評論0 收藏0