CSS 自適應佈局
前言
本篇文章將介頁面佈局中的自適應佈局,常見的自適應佈局有以下2種:左列固定右列自適應、左右兩列固定中間自適應。
1. 左列固定右列自適應佈局方案
說明:左列固定右列自適應,也可以為右列固定左列自適應,常見於中臺管理介面、移動端Web的列表展示等等。
<div class="container"> <div class="left">固定寬度</div> <div class="right">自適應</div> </div>
1.1 子元素 float:left
說明:左邊的固定列設定為 float:left,右邊的自適應列設定為 float:none。
CSS:
* { margin: 0;padding: 0 } .container { position: absolute; width: 100%; height: 100%; } .left { float: left; width: 200px; height: 100%; background-color: #72e4a0; } .right { float: none; width: 100%; height: 100%; background-color: #9dc3e6; }
1.2 子元素 width:calc()
說明:自適應列的width根據calc()自動計算,如:父容器width - 固定列width。
瀏覽器支援:IE 9+。
CSS:
* { margin: 0;padding: 0 } .container { position: absolute; width: 100%; height: 100%; } .left { float: left; width: 200px; height: 100%; background-color: #72e4a0; } .right { float: left; width: calc(100% - 200px); height: 100%; background-color: #9dc3e6; }
1.3 父元素 display: table
說明:父容器採用display: table和table-layout: fixed時,子容器會平分父容器的寬度,這時候固定某列的width,其餘的列會繼續平分剩下的寬度。
瀏覽器支援:IE 8+。
CSS:
* { margin: 0;padding: 0 } .container { position: absolute; display: table; width: 100%; height: 100%; table-layout: fixed; } .left { display: table-cell; width: 200px; height: 100%; background-color: #72e4a0; } .right { display: table-cell; width: 100%; height: 100%; background-color: #9dc3e6; }
1.4 父元素 display: flex
瀏覽器支援:IE 10+。
CSS:
* { margin: 0;padding: 0 } .container { position: absolute; display: flex; width: 100%; height: 100%; } .left { width: 200px; height: 100%; background-color: #72e4a0; } .right { flex: 1; height: 100%; background-color: #9dc3e6; }
2. 左右2列固定,中間自適應
<div class="container"> <div class="left">左側定寬</div> <div class="mid">中間自適應</div> <div class="right">右側定寬</div> </div>
2.1 子元素 width:calc()
說明:自適應列的width根據calc()自動計算,如:父容器width - 固定列width。
瀏覽器支援:IE 9+。
CSS:
* { margin: 0;padding: 0 } .container { position: absolute; width: 100%; height: 100%; } .left { float: left; width: 100px; height: 100%; background-color: #72e4a0; } .mid { float: left; width: calc(100% - 100px - 100px); height: 100%; background-color: #9dc3e6; } .right { float: left; width: 100px; height: 100%; background-color: #4eb3b9; }
2.2 父元素 display: flex
說明:在父元素設定display為flex時,其中一列的flex為1,其餘列都設定固定width。
瀏覽器支援:IE 10+。
CSS:
* { margin: 0;padding: 0 } .container { position: absolute; display: flex; width: 100%; height: 100%; } .left { float: left; width: 100px; height: 100%; background-color: #72e4a0; } .mid { float: left; height: 100%; flex: 1; background-color: #9dc3e6; } .right { float: left; width: 100px; height: 100%; background-color: #4eb3b9; }
相關推薦
CSS自適應佈局(左右固定中間自適應或者右側固定左側自適應)
CSS自適應佈局(左右固定 中間自適應或者右側固定 左側自適應) 經常在工作中或者在面試中會碰到這樣的問題,比如我想要個佈局 右側固定寬度 左側自適應 或者 三列布局 左右固定 中間自適應的問題。 下面我們分別來學習下,當然我也是總結下而已,有如以下方法: 一:
CSS自適應佈局
什麼是佈局,其實就是用定位和尺寸相關的屬性來完成佈局,佈局會用到的有:普通流、浮動、絕對定位三種定位機制,CSS3中的transform、flex等 先來說float浮動,現在比較多的網站都在用這種 浮動佈局: 我們都知道float讓元素脫離了普通流,然後使用width/h
CSS 自適應佈局
前言 本篇文章將介頁面佈局中的自適應佈局,常見的自適應佈局有以下2種:左列固定右列自適應、左右兩列固定中間自適應。 1. 左列固定右列自適應佈局方案 說明:左列固定右列自適應,也可以為右列固定左列自適應,常見於中臺管理介面、移動端Web的列表展示等等。 <div class="conta
這可能是史上最全的CSS自適應佈局總結
標題嚴格遵守了新廣告法,你再不爽,我也沒犯法呀!屁話不多說,直入! 所謂佈局,其實包含兩個含義:尺寸與定位。也就是說,所有與尺寸和定位相關的屬性,都可以用來佈局。 大體上,佈局中會用到的有:尺寸相關的盒子模型,普通流、浮動、絕對定位三種定位機制,CSS3中的transfor
這可能是史上最全的CSS自適應佈局總結教程
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>寬度自適應佈局</title> <style&g
css常用左側固定右側自適應佈局兩欄佈局的方法
話不多說直接上程式碼 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style>
使用css實現三欄自適應佈局
現象: 兩邊兩欄固定寬度,中間為自適應。 思路: 1.絕對定位法: 父元素相對定位,左右兩欄使用絕對定位,中間用margin相對父元素的邊距撐開。 缺點: 子元素使用絕對定位,父元素無法被撐開。會出現如下情況: 2.浮動法: H
【css】移動端自適應佈局與字型大小自適應
一、vw, vh vw它是根據可視區的寬度來計算的。 vh它是根據可視區的高度來計算的。 <body> <style> body { margin:0; } .te
CSS實現三欄自適應佈局(兩邊寬度固定,中間自適應)
所謂三列自適應佈局指的是兩邊定寬,中間block寬度自適應。這道題在今年網易內推前端工程師面試的時候也被問到。 我這裡主要分為兩大類,一類是基於position傳統
關於利用css 實現右側固定 左側自適應佈局的解決方案
最近遇到要求實現 右側大小固定,左側自適應的問題 ,根據親身實現,現總結如下: 1.我們首先看一下左邊固定 右邊自適應的情況 html : <div id="left"> 我在左邊</div> <div id="ri
css實現兩欄自適應佈局
前端經典的兩欄佈局 示例程式碼:點此下載 1、左側定寬,左浮動; 右側寬度100%; !DOCTYPE html> <html> <head> <meta
CSS自適應網站佈局媒體查詢如何設定斷點
如何選擇斷點?(來源) 根據內容建立斷點,絕對不要根據具體裝置、產品或品牌來建立。 從針對最小的移動裝置進行設計入手,然後隨著螢幕型別不斷增加而逐漸改善體驗。 使每行的文字最多為 70 或 80 個字元左右。 以小螢幕開始,不斷
使用CSS實現三欄自適應佈局(兩邊寬度固定,中間自適應)
所謂三列自適應佈局指的是兩邊定寬,中間block寬度自適應。這道題在今年網易內推前端工程師面試的時候也被問到。 我這裡主要分為兩大類,一類是基於position傳統的實現,一類是基於css3新
Css之雙列自適應佈局
不論怎麼拖動瀏覽器, 左側始終固定寬度<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document&
記一次產品需求:圖片等比縮放和CSS自適應布局16:9
是我 width 圖片展示 網上 IT tom 就會 很好 尺寸 前言 前陣子,產品跑過來問我現有的模板中沒有圖片模板,需要添加一個圖片模板;然而,他要求圖片在展示區最好能夠實現隨著窗口的變化而自動按圖片比例等比縮放,並且居中展示圖片。我當時想著,拋開技術實現層面,圖
關於頁面的多種自適應佈局——三列布局
簡單結構1,列表在前,更多列表在中間,內容在後 1 <style type="text/css"> 2 .layout{background-color:gray; padding:10px; border:10px solid orange; margin:10px 0; zoom:
移動端自適應佈局方案-rem佈局.md
Rem是CSS3新引入的單位,通過動態設定根元素html的font-size,等比縮放元素大小以達到適應移動裝置的目的。 在W3C官網上是這樣描述rem的——“font size of the root element” 。 當我們指定一個元素的font-size為2
笨鳥兒 靜態佈局、自適應佈局、流式佈局、響應式佈局、彈性佈局等的概念和區別
一、靜態佈局(Static Layout) 即傳統Web設計,網頁上的所有元素的尺寸一律使用px作為單位。 1、佈局特點:不管瀏覽器尺寸具體是多少,網頁佈局始終按照最初寫程式碼時的佈局來顯示。常規的pc的網站都是靜態(定寬度)佈局的,也就是設定了min-width,這樣的話,如果小於這個寬度就會
[UWP]使用AdaptiveTrigger實現自適應佈局
原文: [UWP]使用AdaptiveTrigger實現自適應佈局 這篇部落格將介紹如何在UWP開發中使用AdaptiveTrigger實現自適應佈局。 場景1:窗體寬度大於800時,窗體背景色為綠色,窗體在0到800之間為藍色。 XAML Code: <Grid x:Name="La
聖盃+雙飛翼 自適應佈局
一、聖盃佈局 左右固定200px,中間自適應 左右兩個div左右浮動,中間div寫到前面 通過margin-left:-100%;來調整到同一行 父容器新增左右padding,左右div相對定位 詳細程式碼如下: <!doctype html> &