今天群裡有人做題發了一道題,由於最近在學習flex布局,就不禁研究了起來...
題目如下:
已知html結構如下,以下哪些css可以實現左列定寬(100px)右列寬度自適應的布局?a選項:(a)左列右列
.parent.left.right(b).parent.left.right(c)
.parent.left.right(d)
.parent.left.right
b選項:
c選項:
d選項:
全部都試過一邊了,首先是左列定寬的條件,這個條件在平時看其實abc都似乎沒什麼問題.起碼在我們大屏時看起來毫無問題.
但是在a,c選項的flex布局中當我們螢幕變小直到小於100px(定寬)+右邊容器內容寬度時,我們就發現定寬的.left開始縮小了.
而b選項中定寬左列將保持100px,知道將右邊擠壓到消失.
d選項則是沒什麼好解釋的了.
那怎麼讓a,c選項獲得和b一樣的效果呢?
那就是使用flex-shirink屬性了至於題目到底該選什麼...該屬性定義了縮小比例,預設值為1,不可為負值.
在flex屬性中順序為:flex:flex-growflex-shirinkflex-basis;
我們讓.left的flex-shirink:0,就可以保證.left不會因為剩餘空間不足而被縮小了.
關於flex-shirink屬性中容易理解的文章
我也是不知道的...
有人知道正確答案麼
二列左列寬度固定，右列寬度自適應布局
左邊固定值，右邊百分比佔完整螢幕的方法。1 用table當然很簡單了，左邊td固定值，右邊100 就ok了 2 div就不知道咋弄了，右邊100 肯定不能float到一行上去了。只好用js判斷瀏覽器的寬度然後減去左邊的寬度。3 不知道有沒有更好的解決辦法。2 xml lang zh cn lang ...
一定一自適應 左定寬，右自適應 左自適應，右定寬
兩個div，一側定寬一側自適應，涉及的原理 div有個預設的屬性，即如果不設定寬度，那他會自動填滿父標籤的寬度 也可以說是塊級元素的屬性 自適應區不能設定浮動，因為一旦浮動就不是塊級元素了，而是行內塊，失去了塊級元素的預設屬性 position absolute 絕對定位不受流式布局影響 calc ...
三行兩列右列固定左列自適應寬度的CSS
dsclub,兀兒 幹部 meta name content 任兀 meta content name keywords title xhml1.0 doc title style type text css id internalstyle body p header maincontent ri...