如題，先給架構
<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的話)
感謝解答的各位