如题，先给架构
<div class="align_l">
<div class="A" />
<div class="B" />
<div class="C" />
</div>
<div class="align_r">
<div class="C" />
<div class="B" />
<div class="A" />
</div>
简单的说
A 跟 B 是固定宽度
C 则是 内文宽度～把剩下的宽度塞满
三者"维持在同一行"
然后另一个重点是
align_l内的div靠左对齐
align_r内的div则靠右
原先，A B C 三者都加上float
不过 align_r 内的div就算float:right也没办法靠右(why?)
而且当C超过一定宽度的时候会跳到第二行去
后来去掉float，改用display:flex跟flex-direction:row
似乎完美的解决掉了问题
就连align_r的靠右对齐问题
也用justify-content: flex-end;解决了
然后就悲剧了....mobile(iPhone)上ABC分别为三行....
大概是因为flex的细项设定为CSS3所以手机上的还没实装吧..
不过Safari就算了，Chrome竟然也不行
估计要回归float才能解决，但补满最大宽度又强制单行排列的问题仍然存在
所以想问
1.有以上float的解法吗？还是说flex只要修改一下可以用在手机上？
2.因为排列顺序的问题，所以align_r内的顺序是CBA不是ABC
有办法仍然是ABC但排列顺序和align_l内的反过来吗？(不用absolute的话)
感谢解答的各位