作者KawasumiMai (真実は壊滅した)
看板Web_Design
標題[問題] 用float取代flex的方法
時間Thu Mar 26 14:37:54 2015
如題，先給架構
<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的話)
感謝解答的各位
--
▊▍▃▄▅▅▅▃▃▁▍▉ █▏ ▌ ◤『われ刃向けるは
アヤカシのみ。
▏ ▅●
● " ▃
▄▊ ▉ ▎ ▊ ▎ 吾斬り伏せるは
アヤカシのみ。
▎◤▊▌ 。 .
▎◥ ▋ ▋ ▉ ▍ ◤ ▊ ▎ 私は．．．
▍▏▉█▄▂▁●
▏◢ ▏ ▊▌ ▌▋◥ ◤◤▋▃ 魔物を討つ者だから．．．』
▋▎▇▆▄▂
▅▂▁ ▍▎ ▍▎ ▊ ▌◣ ◢▊ ▍▋ ψKawasumiMai▄
▉▎ ′′ ▌ ▍▋▌ ▍ ▏ ▉ ▋▊ ▄▄▄川澄 舞▄
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 60.251.157.241
※ 文章網址: https://webptt.com/m.aspx?n=bbs/Web_Design/M.1427351876.A.2A8.html
2F：→ meteorsok: this? 03/26 15:39
3F：→ KawasumiMai: 差了一點點，主要是C的寬度 03/26 15:43
4F：→ KawasumiMai: C的寬度不是強制補滿，而是依照文字寬度變大 03/26 15:43
5F：→ KawasumiMai: 但是最大只能在維持一行的情況下塞滿剩下空間 03/26 15:44
6F：→ KawasumiMai: 不能跳到下一行去 03/26 15:44
7F：→ rarex: 左右順序可以用direction:rtl ltr ? 03/26 15:45
8F：→ KawasumiMai: 樓上的方法有用，感謝，終於可以不用手動換Div順序 03/26 15:49
10F：→ KawasumiMai: =3= 外面加一層框當wrapper的做法怎麼一直沒想到 03/26 16:01
11F：→ KawasumiMai: 感謝miau，這個做法太棒了QQ 03/26 16:01
12F：→ KawasumiMai: 不對..遇到一點小問題... 03/26 16:21
13F：→ KawasumiMai: display:table是不是會限制div直接match內容大小？ 03/26 16:22
14F：→ KawasumiMai: 結果無法套用align_l跟align_r的max-height XDDDDD 03/26 16:22
15F：→ KawasumiMai: 感謝miau大的幫助QQ 03/26 16:54
16F：→ KawasumiMai: 結果原本flex的方法加上 -webkit-就解決了.... 03/26 16:54
18F：→ KawasumiMai: 喔喔樓上的css好簡潔..所以真的可以不用用到flex 03/27 12:59
19F：→ KawasumiMai: 秘訣是因為C沒用到float而是直接margin嗎？ 03/27 12:59
20F：推 eight0: 這和一樓的方法相同，只是在 C 裡多加了一個 wrapper 03/27 15:47