关于某题左列定宽右列宽度自适应布局的学习

adam1q84 发布于2019-08-29 11:18 / 1353人阅读

摘要：今天群里有人做题发了一道题由于最近在学习布局就不禁研究了起来题目如下已知结构如下以下哪些可以实现左列定宽右列宽度自适应的布局左列右列选项选项选项选项全部都试过一边了首先是左列定宽的条件这个条件在平时看其实都似乎没什么问题起码在我们大屏时看起

今天群里有人做题发了一道题,由于最近在学习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的宽度自适应自适应宽度

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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