请教一个前端的布局问题

[hourui]

https://gist.github.com/cuber/10714968

[yushiro]

参考： http://www.html5rocks.com/zh/tutorials/flexbox/quick/#toc-center
弹性方框模型 (Flexible Box Model) 快速入门

[xiaomajia008]

哎,用js可以轻易实现...

[hourui]

@yushiro 如梦初醒，是时候该去补补CSS3的课了。每次都想着compat IE678，是时候往远看了。

[hourui]

@xiaomajia008 在布局上，我还是倾向于css，尽量避免用js去适应布局。

[zzNucker]

我也好想用flexbox啊。。。。。。 太蛋疼了。

[westup]

腾讯那题啊，表示当时也卡在那里了，愧为老前端

[crs0910]

外面 div 相对定位，里面两个 span 绝对定位，一个 left:0 ，一个 right:0 ，right那个加个background。

[hourui]

@crs0910 #left如果被#right盖住，视觉上会存在1/2或者1/4个汉字被盖住，看上去会异常诡异。

[romoo]

http://jsfiddle.net/4ebce/embedded/result/

[P233]

这个不需要 flexbox ，更不用 js

#right float:right;width:auto
#left 不设定浮动，margin-right: auto

注意，markup 里 #left 一定要在 #left 的前面

[P233]

打错了，HTML #right 要在 #left 前面

[romoo]

我的方法需要将 #left 和 #right 的位置换一下。

[crs0910]

@hourui 打个padding调整一下，不过我这种做法很丑陋，还是算了。

[hourui]

@crs0910 关键就是内容是什么也是未知，也许是中文英文混合...

[P233]

http://jsbin.com/lubazuwu/1/edit

[hourui]

@P233
无效啊...

[hourui]

@P233 你给的链接里面看是ok的，我再试试

[hourui]

@P233 赞一个，果然有效。浮动高级用法。

[P233]

@hourui 截图里面 #left 继承了 inline-block，而且 markup 里有 whitespace 所以有 2px 的额外 margin

在 markup 里 <span></span><span></span><span></span> 然后 display: inline-block 不会有间距问题

但是如果
<span></span>
<span></span>
<span></span>
就有间距了

[hourui]

@P233 懂了！给你32个赞。