成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

關(guān)于某題左列定寬右列寬度自適應(yīng)布局的學(xué)習(xí)

adam1q84 / 1380人閱讀

摘要：今天群里有人做題發(fā)了一道題由于最近在學(xué)習(xí)布局就不禁研究了起來題目如下已知結(jié)構(gòu)如下以下哪些可以實現(xiàn)左列定寬右列寬度自適應(yīng)的布局左列右列選項選項選項選項全部都試過一邊了首先是左列定寬的條件這個條件在平時看其實都似乎沒什么問題起碼在我們大屏?xí)r看起

今天群里有人做題發(fā)了一道題,由于最近在學(xué)習(xí)flex布局,就不禁研究了起來...
題目如下:

已知HTML結(jié)構(gòu)如下,以下哪些CSS可以實現(xiàn)左列定寬(100px)右列寬度自適應(yīng)的布局?



    
左列

    
右列




(A).parent{display:flex;}.left{width:100px;}.right{flex:1;}
(B).parent{overflow:hidden;}.left{float:left;width:100px;}.right{overflow:hidden;}
(C).parent{display:flex;}.left{width:100px;}.right{flex:auto;}
(D).parent{overflow:hidden;}.left{float:left;width:100px;}.right{float:right;width:100%;}

A選項:
http://jsfiddle.net/thewindsw...
B選項:
http://jsfiddle.net/thewindsw...
C選項:
http://jsfiddle.net/thewindsw...
D選項:
http://jsfiddle.net/thewindsw...

全部都試過一邊了,首先是左列定寬的條件,這個條件在平時看其實ABC都似乎沒什么問題.起碼在我們大屏?xí)r看起來毫無問題.
但是在A,C選項的flex布局中當(dāng)我們屏幕變小直到小于100px(定寬)+右邊容器內(nèi)容寬度時,我們就發(fā)現(xiàn)定寬的.left開始縮小了.

http://jsbin.com/fafosu/32/ed...

而B選項中定寬左列將保持100px,知道將右邊擠壓到消失.
D選項則是沒什么好解釋的了.

那怎么讓A,C選項獲得和B一樣的效果呢?

那就是使用flex-shirink屬性了
該屬性定義了縮小比例,默認(rèn)值為1,不可為負(fù)值.
在flex屬性中順序為:flex:flex-grow flex-shirink flex-basis;
我們讓.left的flex-shirink:0,就可以保證.left不會因為剩余空間不足而被縮小了.
關(guān)于flex-shirink屬性中容易理解的文章http://zhoon.github.io/css3/2...
至于關(guān)于數(shù)值不同導(dǎo)致壓縮的不同程序上述文章也有所介紹,大家可以去看一下.

至于題目到底該選什么...

我也是不知道的...
有人知道正確答案么

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/111561.html

相關(guān)文章

  • 常用布局總結(jié)

    摘要：，塊級格式化上下文創(chuàng)建的情況浮動元素絕對定位元素行內(nèi)塊元素表格的單元格，表格的標(biāo)題特性不為的元素彈性盒布局規(guī)則內(nèi)部的會在垂直方向，一個接一個地放置。 一、兩列布局 1.1 左列定寬，右列自適應(yīng) 1）利用float + margin實現(xiàn) （方法1） HTML代碼： 左列定寬 右列自適應(yīng) CSS代碼： .left { width: 600px; height: 40...

    mingde 評論0 收藏0

  • 兩列自適應(yīng)布局方案整理

    摘要：前提本文討論的是兩列自適應(yīng)布局左列定寬不定寬，右列自適應(yīng)。左列不定寬，右列自適應(yīng)形成的間隔通過設(shè)置來觸發(fā)特性這個方法主要是應(yīng)用到的一個特性浮動元素的塊狀兄弟元素會無視浮動元素的位置，盡量占滿一整行，這樣該兄弟元素就會被浮動元素覆蓋。 前提 本文討論的是兩列自適應(yīng)布局：左列定寬/不定寬，右列自適應(yīng)。 showImg(https://segmentfault.com/img/bVsIa0)...

    starsfun 評論0 收藏0

  • PC端CSS布局匯總

    摘要：因為端和移動端布局差異較大，所以我將兩端布局分開講，本文章將針對端的布局進(jìn)行講解，以下代碼只寫關(guān)鍵代碼。為了提高網(wǎng)頁性能，考慮到，表格元素盡量少用，有其他選擇的情況盡量用其他布局。 前言 此文章是 解剖CSS布局原理 的續(xù)集，之前那篇文章講的都是理論，本文章講具體的實例，根據(jù)自己對布局的理解與開發(fā)經(jīng)驗分為以下幾類。 因為PC端和移動端布局差異較大，所以我將兩端布局分開講，本文章將針對P...

    zhangxiangliang 評論0 收藏0

  • css實現(xiàn)居中、自適應(yīng)

    摘要：中的有些元素也是這樣，他們有的只對牛奶感興趣，有的只喜歡吃堅果和果凍，而討厭牛奶。我稱之為果凍依賴型元素，又稱之為依賴型元素，也就是說只有一個元素屬于或是也可以理解為水平水平，其身上的屬性才會起作用。 單列布局水平居中 水平居中的頁面布局中最為常見的一種布局形式，多出現(xiàn)于標(biāo)題，以及內(nèi)容區(qū)域的組織形式，下面介紹四種實現(xiàn)水平居中的方法（注：下面各個實例中實現(xiàn)的是child元素的對齊操作，c...

    陸斌 評論0 收藏0

  • 利用HTML和CSS實現(xiàn)常見的布局

    摘要：中的有些元素也是這樣，他們有的只對牛奶感興趣，有的只喜歡吃堅果和果凍，而討厭牛奶。我稱之為果凍依賴型元素，又稱之為依賴型元素，也就是說只有一個元素屬于或是也可以理解為水平水平，其身上的屬性才會起作用。 單列布局 水平居中 水平居中的頁面布局中最為常見的一種布局形式，多出現(xiàn)于標(biāo)題，以及內(nèi)容區(qū)域的組織形式，下面介紹四種實現(xiàn)水平居中的方法（注：下面各個實例中實現(xiàn)的是child元素的對齊操作，...

    daydream 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<