0

As far as i know and understood, there are two possibilities to build a colum-layout or grid-layout or to position elements in a more complex way with css:

1)position:absolute/relative;

2)float:left/right; clear

Are there any alternatives to that and what is better or is less supported or doesn't it matter at all which technique you use? What is best practice with best browser support?

Told or known alternatives:

3) display: inline-block;

4) display: table-cell; (isn't it the same as html-tables?)

5) html-table (but that's not css or semantic)

6) css3 columns (less support or not?)

4

2 回答 2

2

1) 位置：绝对/相对；

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

2）浮动：左/右；清除

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

3）显示：inline-block；

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

4）显示：表格单元格；（不是和 html-tables 一样吗？）

不，它与使用 HTML 表格不同。表格在您的标记（内容）中，display:table-*是您的 CSS（演示）的一部分。这是处理布局的好方法，但再一次，对旧浏览器的支持并不完全存在。

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

你是对的，不要使用这个，表格是用于标记表格数据，而不是用于布局。

6）css3列（是否支持较少？）

再一次，支持并不真正存在，我相信这更多地用于文本而不是布局（即使它可以用于两者）。

最佳浏览器支持的最佳实践是什么？

如果您正在寻找一个通用的答案，您想自己构建它，并且您关心浏览器支持，只需使用floats，必要时使用相对/绝对定位。准确决定要支持哪些浏览器，并一如既往地在不同的浏览器中测试您的布局，看看哪些有效，哪些无效。没有灵丹妙药，魔鬼在细节中。

于 2012-01-22T15:19:36.560 回答
1

You could use a sequence of inline-blocks for columns as well I think. Or maybe display: table-cell as well. There are probably dozens of ways of accomplishing it.

于 2012-01-22T02:03:05.073 回答