成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

adam1q84 / 1423人閱讀

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

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

已知HTML結(jié)構(gòu)如下,以下哪些CSS可以實(shí)現(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選項(xiàng):
http://jsfiddle.net/thewindsw...
B選項(xiàng):
http://jsfiddle.net/thewindsw...
C選項(xiàng):
http://jsfiddle.net/thewindsw...
D選項(xiàng):
http://jsfiddle.net/thewindsw...

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

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

而B(niǎo)選項(xiàng)中定寬左列將保持100px,知道將右邊擠壓到消失.
D選項(xiàng)則是沒(méi)什么好解釋的了.

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

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/111561.html

相關(guān)文章

  • 常用布局總結(jié)

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

    mingde 評(píng)論0 收藏0

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

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

    starsfun 評(píng)論0 收藏0

  • PC端CSS布局匯總

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

    zhangxiangliang 評(píng)論0 收藏0

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

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

    陸斌 評(píng)論0 收藏0

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

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

    daydream 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<