新足迹 › 论坛 › 兴趣爱好区 › IT与科技 › AI 相关 › CSS3:　Grid Alignment Level 3

精华好帖回顾
· 【三口之家人均六刀吃饱吃好】晚餐九：农家小炒肉、土豆炖茄子、菠菜蛋花汤 (2023-5-16) ayeeda	· Box hill 在墨尔本能算好区吗？ (2007-5-16) 格美
· 父亲节 Mt Kosciuszko 徒步露营（iPhone4s） (2013-6-19) 路天涯	· 从新加坡到澳洲----记载我的移民路「结尾已经更新」 (2014-10-15) doudousg

查看: 1576|回复: 2

CSS3:　Grid Alignment Level 3 [复制链接]

dalaohu

金靴族

发表于 2010-11-8 09:13 |显示全部楼层

此文章由 dalaohu 原创或转贴，不代表本站立场和观点，版权归 oursteps.com.au 和作者 dalaohu 所有！转贴必须注明作者、出处和本声明，并保持内容完整

CSS 的fans 可以看一下。

Microsoft Folks Submit Grid model for HTML/CSS to the W3C.

http://www.interoperabilitybridges.com/css3-grid-align/

<style type="text/css">
#grid    { grid-columns: auto minmax(min-content, 1fr);
            grid-rows: auto minmax(min-content, 1fr) auto
            }
#title { grid-column: 1; grid-row: 1 }
#score { grid-column: 1; grid-row: 3 }
#stats { grid-column: 1; grid-row: 2; grid-row-align: start }
#board { grid-column: 2; grid-row: 1; grid-row-span: 2 }
#controls { grid-column: 2; grid-row: 2; grid-column-align: center }
</style>

<div id="grid">
<div id="title">Game Title</div>
<div id="score">Score</div>
<div id="stats">Stats</div>
<div id="board">Board</div>
<div id="controls">Controls</div>
</div>

搞得跟xaml 一样了。

足迹 Reader is phenomenal. If you never used, you never lived 火速下载