【问题标题】:Is there any XAML Grid element equivalent in HTML/CSS?HTML/CSS 中是否有任何等效的 XAML Grid 元素?
【发布时间】:2013-05-09 11:08:49
【问题描述】:

我对 WPF、XAML 等有丰富的经验。但是,我需要在 HTML/CSS/JS 中创建一些东西。

在 WPF 和 Silverlight 中,有一个非常通用的元素,即“网格”。它本质上是一个包含任何类型视觉对象的列表,这些对象将根据行/列集合定义进行排列。

这里是非 xaml 上瘾者的(简单恕我直言)示例:

http://wpftutorial.net/GridLayout.html

我相信它是管理视觉布局的最重要的控件。

现在,我想知道网络世界是否有任何等效的“组件”,可能简单而干净:对于这样一个简单的问题,没有大量代码。换句话说,我不想依赖 ASP.Net、ExtJS 等框架。只是一个指南,带有最少的 HTML/CSS/JS 部分。

使用最新的浏览器没问题。

非常感谢。

【问题讨论】:

  • 像 bootstrap 或 Foundation 这样的 CSS 网格系统呢?看看twitter.github.io/bootstrap/scaffolding.htmlfoundation.zurb.com/grid.php
  • 谢谢,米歇尔。我已经看到了 Zurb 方式,但这很像一个非常常见的问题的补丁。然而,这是“常见的”恕我直言,但也许对大多数人来说并非如此!此外,您不能跨越行。

标签: html css wpf xaml


【解决方案1】:

好吧,我自己找到了一个,虽然它还在开发中:目前似乎只有 IE10 实现了它。

http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_grid.htm

我真的希望这个功能不会在短时间内被破坏。

【讨论】:

  • 嗯,AFAIK 这不是 MS 独有的,而是 W3C 推荐的。我在 Chrome 端看到过,似乎他们已经开始实施了,但是......它会成功吗?
  • 嗯,以“-ms”开头的符号似乎暗示了其他情况。关于此事的更好的页面可能是the one on w3.org(哇,刚刚注意到日期:2013 年 5 月 8 日)。我当然也希望这样的东西得到普遍的支持,如果你想在应用程序类型的网站中拥有动态行,那么缺乏一个像样的网格布局是令人恼火的。
  • 2020 年更新:CSS 网格非常棒,在某些方面甚至比 WPF 的网格更好。它得到了很好的支持。
  • @WoodrowBarlow 我同意,但它在 Mac 上仍然存在一些问题:Safari 和 Chrome。出于这个原因,目前我更喜欢使用 flex 而不是 grid。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-05-07
  • 2010-12-30
  • 2011-12-03
  • 2015-12-06
  • 1970-01-01
相关资源
最近更新 更多