CSS实现多个容器保持相同宽度
最后更新于
最后更新于
这是一个小伙伴发来的demo
他想让上下这两层啊保持同样的宽度
所以他为了实现这个效果呢
写了一段JS代码
我们先来把这个JS代码
主持解开看一下
效果
就是这样大家看
那他的问题是
除了JS代码我们可不可以用CSS来实现
我们提到保持
相同的宽度或者高度的时候
我们首先会想到flex对吧
我们先来看这个例子
这是一个很简单的两个DIY
然后被套在了一个flex布局里面
我们来看一下啊
那这种布局
他默认就会保持同样的高度
大家看
为什么呢
那是因为哈
flex布局里面他默认有一个属性叫
align-items 他默认是stretch
所以呢他会保持一个相同的高度
如果我们把它改成
flex start
大家看
它就不会相同的高度了
所以我们如果想让两个层
保持同样的高度呢
可以借用flex这个特性
那同样的高度是这样同样的宽度呢
我们这样
把这个代码原封不动放到这个文件里
然后呢把方向改一下
我们用flags election等于cup
大家看这个方向虽然变了
但是他默认flex布局他是（横向）撑满的
他有点像block
所以重点来了
我们如果想让两个层保持同样的宽度
就不能用flex
要用inline-flex
大家再看
这会我在这再加东西他看
他就会保持相同的宽度了
所以呢我们再回到刚才这个例子（demo）
如果想让上下两个层保持同样的宽度
怎么处理呢
我们可以这样
把这两个层啊
单独的放到一个DIY里面
放到这里
然后把这个DIY
把它换成display
等于
line
flex 然后呢
flex direction等于column
我们再来看一下
打开就可以了我在这加一个 contenteditable
好 注意！
大家看 是不是就可以了
最后呢我们留一个小小的思考
就是为什么我们要在中间加一个DIY
而不是在最外层加上 inline-flex 这个属性