[問題] 用float取代flex的方法

看板Web_Design作者KawasumiMai (真実は壊滅した)時間11年前 (2015/03/26 14:37)推噓3(3推 0噓 17→)

留言20則, 5人參與討論串1/1

如題，先給架構 <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://www.ptt.cc/bbs/Web_Design/M.1427351876.A.2A8.html

推

meteorsok

03/26 15:39, , 1^F

03/26 15:39, 1^F

→

meteorsok

03/26 15:39, , 2^F

03/26 15:39, 2^F

→

KawasumiMai

03/26 15:43, , 3^F

03/26 15:43, 3^F