作者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/cn.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