请教一个前端的布局问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

这是一个创建于 3905 天前的主题，其中的信息可能已经有所发展或是发生改变。

第 1 条附言 · 2014-04-15 17:43:33 +08:00

经@P233指点已经找到正解

第 2 条附言 · 2014-04-15 20:20:36 +08:00

@emric 提点，这是的确是一个BFC。
顺便附送一个帖子
http://www.cnblogs.com/pigtail/archive/2013/01/23/2871627.html

right

left

span

22 条回复 • 1970-01-01 08:00:00 +08:00

yushiro

2014-04-15 16:51:22 +08:00

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

xiaomajia008

2014-04-15 16:57:07 +08:00

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

hourui

2014-04-15 16:59:03 +08:00

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

hourui

2014-04-15 17:00:15 +08:00

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

zzNucker

2014-04-15 17:00:40 +08:00

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

westup

2014-04-15 17:02:08 +08:00

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

crs0910

2014-04-15 17:04:52 +08:00

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

hourui

2014-04-15 17:07:45 +08:00

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

romoo

2014-04-15 17:08:31 +08:00

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

P233

2014-04-15 17:09:27 +08:00

这个不需要 flexbox ，更不用 js

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

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

P233

2014-04-15 17:10:00 +08:00

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

romoo

2014-04-15 17:10:41 +08:00

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

crs0910

2014-04-15 17:20:57 +08:00

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

hourui

2014-04-15 17:24:48 +08:00

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

P233

2014-04-15 17:31:43 +08:00

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

hourui

2014-04-15 17:31:54 +08:00

@P233

无效啊...

hourui

2014-04-15 17:34:48 +08:00

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

hourui

2014-04-15 17:40:31 +08:00

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

P233

2014-04-15 17:41:51 +08:00

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

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

但是如果



就有间距了

hourui

2014-04-15 17:44:00 +08:00

@P233 懂了！给你32个赞。

emric

2014-04-15 19:29:06 +08:00

这不是又一个变样的 BFC ?

hourui

2014-04-15 20:19:43 +08:00

@emric 学习了一下BFC这个词。的确这是一个BFC
看到个不错的帖子介绍BFC
http://www.cnblogs.com/pigtail/archive/2013/01/23/2871627.html