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

Question

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

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

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

Answer 1

響應式Web設計 - 版面配置

Answer 2

看響應式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%;