1、先弄两个border为1px的div,显示如图一;
2、给第一个div设置outline,显示如图二,此时表现正常;
3、给两个div的父盒子设置display: flex;flex-direction: column; 则显示如图三,测试第一个div的outline被第二个给盖住了,而我的期望是设置flex后表现仍能够跟图二相同。
求大神指点~~
1、先弄两个border为1px的div,显示如图一;
2、给第一个div设置outline,显示如图二,此时表现正常;
3、给两个div的父盒子设置display: flex;flex-direction: column; 则显示如图三,测试第一个div的outline被第二个给盖住了,而我的期望是设置flex后表现仍能够跟图二相同。
求大神指点~~
10 回答11.1k 阅读
6 回答3k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
3 回答5.1k 阅读✓ 已解决
5 回答1.9k 阅读
其实你加不加
display: flex
两个盒子的边线都会靠在一起,因为outline
是不算在盒子的尺寸里的,区别只在于你的图二是第一个盒子盖在了第二个盒子上,而图三是第二个盒子盖在了第一个盒子上,所以要想实现图二的效果的话,给第一个盒子加一个z-index: 1000
,第二个盒子加一个z-index: 500
,这样第二个盒子永远不会盖在第一个盒子上,而第一个盒子永远盖在第二个盒子上,这样就算你用display: flex
,也是图二的效果了。