5

我试图归档一个简单的侧边栏 | 用普通的浮点数在视觉上显示内容,然后我使用经典的等高列技术(margin-bottom: -99999px; padding-bottom: 99999px等),但我不喜欢它,我在这里和那里遇到了一些问题,所以我决定使用 flex-box,我试过了前段时间有固定大小的宽度,它工作得很好,但现在我有百分比宽度,所以似乎 Firefox 根本不喜欢它......

这个例子展示了我通常期望 flex-box 是如何工作的,它在 safari 和 chrome 中做得很好,但是 firefox 只是忽略了百分比宽度......我发现这是 firefox 的一个已知问题,但它是一个旧问题,我想他们已经解决了...

然后我尝试了一些不同的东西来欺骗firefox,但它仍然不是我所期望的,因为侧边栏根据内容在页面之间具有不同的大小......

所以我最终放弃了具有流畅布局的 flex-box 并使用更简单的东西来满足我的需求......

但是我很想知道是否有人通过任何解决方法解决了这个问题,或者我们是否都在等待 mozila 解决这个问题......

谢谢!

4

1 回答 1

1

我强烈建议不要使用margin-bottom: -99999px; padding-bottom: 99999px解决方法。如果你想要一个流畅的布局(我想这就是问题所在?),拆分为 14% 和 86%,只需使用普通的旧 CSS 而不是 Flex。

http://jsfiddle.net/97dtV/7/

为什么要重新发明轮子。如果您正在寻找更好的网站布局方式,请尝试“网格”方法。

  • 语义网格 (http://semantic.gs/)
  • 引导程序 - (http://twitter.github.com/bootstrap/index.html)

这假设您出于某种特定原因不需要 flex,如果您这样做,则忽略它;)。另外,在使用 CSS3 特定属性时要考虑向后兼容性!

于 2012-03-05T11:32:19.673 回答