關于某題左列定寬右列寬度自適應布局的學習

adam1q84 發布于2019-08-29 11:18 / 1372人閱讀

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

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

已知HTML結構如下,以下哪些CSS可以實現左列定寬(100px)右列寬度自適應的布局?

    左列
    右列

(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都似乎沒什么問題.起碼在我們大屏時看起來毫無問題.
但是在A,C選項的flex布局中當我們屏幕變小直到小于100px(定寬)+右邊容器內容寬度時,我們就發現定寬的.left開始縮小了.

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

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

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

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

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

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

GPU云服務器云服務器某題左列定寬右列右列自適應 html的寬度自適應自適應寬度

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

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

常用布局總結

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

mingde 2019-08-30 15:44 評論0 收藏0
兩列自適應布局方案整理

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

starsfun 2019-08-30 12:45 評論0 收藏0
PC端CSS布局匯總

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

zhangxiangliang 2019-08-29 13:55 評論0 收藏0
css實現居中、自適應

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

陸斌 2019-08-29 16:15 評論0 收藏0
利用HTML和CSS實現常見的布局

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

daydream 2019-08-28 18:21 評論0 收藏0