首页 > 父容器自由伸缩的情况下,子容器三列等宽布局如何实现

父容器自由伸缩的情况下,子容器三列等宽布局如何实现

今天去面试的时候出现了这样一道题:
要求大容器在宽度自由伸缩的情况下,内部三个子元素宽度始终1:1:1,如何实现,请尽量写出俩种方法?

我给的答案:
方式一:
弹性盒子布局方式:(存在性兼容问题,ie系基本挂了,移动端4.3+)
父容器:dispaly:flex;
子容器分别设置:flex:1;
方式二:
不知道说什么了,就写了,在父容器定宽的情况下,可以使用百分比各占1/3的方式。

不知道weber有开发过这种情况的吗?


看响应式Web设计 - 布局后突然有些思路,补充一下,也不知道这样是否能满足这道题目要求,也无从获取面试官正确答案了。
答这个问题时,自己以为没有设置宽度和没有设置高度(父容器没有设置高度,子容器设置百分比的高度无法生效)会出现一样的问题,这个明显是错误的。一个没有设置宽度的块级元素默认占满父容器宽度,所以如果要设置三列各占33%是能够等宽:
1.使得子元素横向排列;
2.使得子元素宽度一致;

方案1:(行内块方式)

display:inline-block;
width:33%;

方案2:(浮动方式)

float:left/right;
width:30%;

方案3:(绝对定位方式)

position:absolute;
width:33%;
left:0/33%/66%;    

响应式Web设计 - 布局

【热门文章】
【热门文章】