css Column / Grid-Layout:position或float。任何替代方案?

时间:2012-01-22 01:59:32

标签: css layout css-float css-position absolutelayout

据我所知和理解,有两种可能性来构建colum-layout或grid-layout或使用css以更复杂的方式定位元素:

1)的位置是:绝对/相对;

2)浮动:左/右;明确

是否有任何替代方案,哪些更好或更少支持,或者根本不重要您使用哪种技术?什么是最佳浏览器支持的最佳实践?

告知或已知替代方案:

3)显示:inline-block;

4)显示:table-cell; (它和html表不一样吗?)

5)html-table(但这不是css或语义)

6)css3列(支持与否支持?)

2 个答案:

答案 0 :(得分:2)

  

1)位置:绝对/相对;

可以是布局的一部分,不一定。

  

2)浮动:左/右;明确

是的,浮动通常用于布局。

  

3)显示:inline-block;

这很少用于页面布局,并且对它的支持是错误的(它也是对空白敏感的)。

  

4)显示:table-cell; (它和html表不一样吗?)

不,这与使用HTML表格不同。表格在您的标记(内容)中,display:table-*是您的CSS(演示文稿)的一部分。这是解决布局问题的一种很好的方法,但对于旧版浏览器来说,支持并不完全适用。

  

5)html-table(但这不是css或语义)

你是对的,不要使用它,表格用于标记表格数据,而不是用于布局。

  

6)css3列(支持与否支持?)

再一次,支持并不是真的存在,而且我认为这不仅适用于文本而非布局(即使它可以用于两者)。

  

最佳浏览器支持的最佳做法是什么?

如果您正在寻找一般答案,您希望自己构建它,并且您关注浏览器支持,只需使用float s,具有相对/绝对定位如有必要。确定您想要支持哪些浏览器,并且一如既往地在不同的浏览器中测试您的布局,看看哪些有用,哪些无效。没有魔法弹,细节中的魔鬼。

答案 1 :(得分:1)

我认为你可以使用一系列内联块作为列。或者也许display: table-cell。可能有很多种方法可以实现它。