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

今天群里有人做题发了一道题,由于最近在学习flex布局,就不禁研究了起来...
题目如下:

已知HTML结构如下,以下哪些CSS可以实现左列定宽(100px)右列宽度自适应的布局?
<div class="parent"><div class="left">左列</div><div class="right">右列</div>
</div>
(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...
至于关于数值不同导致压缩的不同程序上述文章也有所介绍,大家可以去看一下.

至于题目到底该选什么...

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

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

左列定宽,右列自适应
利用float+margin HTML代码 <body> <div id="left">左列定宽</div> <div id=" ...
html怎么设置左侧区域宽度,【CSS】左侧定宽、右侧宽度自适应布局
又是一道前端的面试题,请实现页面布局,包括页头.内容区域.页脚三部分,其中内容区域为左右分栏,左栏定宽200px.右栏自适应宽度. 虽然是以前应用中碰到过的布局,但现场还是没写对,来重新做一下. 双列 ...
CSS使用浮动属性和边距设计3行3列定宽的布局实例
CSS使用浮动属性和边距设计3行3列定宽的布局下面使用CSS的浮动属性和边距属性设计一个简单地3行3列并且是固定宽度的布局页面. 实例设计步骤如下: 1. 制作3行3列定宽布局的XHTML部分.源 ...
【CSS】一侧定宽，另一侧自适应的布局该如何去做
一侧定宽,一侧自适应的页面布局在现在用的很多,有哪些实现方式呢? (个人总结,这个要看是左定右适.还是左适右定.视情况而定) 1, 左边固定,右边自适应:通过浮动和margin取正值来实现: 这里的原 ...
Layout两列定宽中间自适应三列布局
最容易理解的一种方法,以中间内容为主体,通过 margin 或者 padding 将两侧撑开,最后用 absolute 定位两侧 html: <div class="container ...
沫沫金：2014最新全浏览器兼容左列固定右列自适应宽度技巧大公开
做前端的人肯定会遇到经典的左列固定,右列自适应宽度的样式效果.这种想起来很简单做起来很麻烦的事情今天你有好方案了. --不要信那些什么左侧写固定宽度,右侧不用写宽度属性和浮动属性,浏览器自动就实现右列 ...
两列自适应布局方案整理
前提本文讨论的是两列自适应布局:左列定宽/不定宽,右列自适应. 虽然分这两种情况,但实际上不定宽的方案同样适用于定宽的场景,因此不定宽的方案泛用度更高. 左列定宽,右列自适应 margin + fl ...
css宽高自适应布局，实现Sticky Footer的三种布局方式
宽度自适应布局: 1.使用场景: 一侧(左侧或者右侧)为固定的导航或者菜单栏,另一侧将会随着浏览器的缩放而自适应改变其大小.这种布局结构可用于顶层布局结构亦可用于某个局部功能块,常见于各种web系统( ...
两栏布局之右定宽左自适应，上定高下自适应，下定高上自适应
这三种布局其实都是大同小异,今天就全部总结成一篇文章. 1.右定宽左自适应 <!DOCTYPE html> <html lang="en"> <hea ...

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

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

最新文章

热门文章