- From: 程劭非 <csf178@gmail.com>
- Date: Sat, 17 Mar 2012 17:40:48 +0800
- To: John Hax <johnhax@gmail.com>
- Cc: (wrong string) 樂會ML <public-html-ig-zh@w3.org>
JK的信件似乎没人理，打算去顶个帖，大家看看补充点什么。 ============================================================= Hi, everyone This is a proposal for a new css layout. We have a few discussions in HTML Chinese interest group. This layout was first used by http://pinterest.com/ and begin to be used by many other website recently. Here is several other samples: http://faxianla.com/ http://www.mogujie.com/book/clothing/ http://www.diandian.com/ http://www.woxihuan.com/ http://search.naver.jp/image?q=%E5%89%8D%E7%94%B0%E6%95%A6%E5%AD%90 As you can see all above websites are using JavaScript to implement this layout. There is no way to do this in CSS. (We tried flex-box、grid and exclusions, but none of them could support this well.) Considering it is so widely used, I think supporting this in CSS might be a good choice. To spport this, we need a new kind of box. It will create anonymous block box like a block container for its inline-level child box, even if there is no block level box inside it. The box will generate column box like a multi-column element. Then decide which column box child box will flow into in the way described below: Overall the rule is "next box should be placed into the shortest column." Consider we have a container and several child boxes, produced by the following HTML: <div id="container"> <div id="a" > </div> <div id="b" > </div> <div id="c" > </div> <div id="d" > </div> <div id="e" > </div> </div> The positions of child boxes will be determined as following: ┏━━━━━┳━━━━━┳━━━━━┓ ┃┏━━━┓┃ ┃ ┃ ┃┃ ┃┃ ┃ ┃ ┃┃ ┃┃ ┃ ┃ ┃┃ ┃┃ ┃ ┃ ┃┃ ┃┃ ┃ ┃ ┃┃ ａ ┃┃ ┃ ┃ ┃┃ ┃┃ ┃ ┃ ┃┃ ┃┃ ┃ ┃ ┃┃ ┃┃ ┃ ┃ ┃┗━━━┛┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┏━━━━━┳━━━━━┳━━━━━┓ ┃┏━━━┓┃┏━━━┓┃ ┃ ┃┃ ┃┃┃ ┃┃ ┃ ┃┃ ┃┃┃ ｂ ┃┃ ┃ ┃┃ ┃┃┃ ┃┃ ┃ ┃┃ ┃┃┗━━━┛┃ ┃ ┃┃ ａ ┃┃ ┃ ┃ ┃┃ ┃┃ ┃ ┃ ┃┃ ┃┃ ┃ ┃ ┃┃ ┃┃ ┃ ┃ ┃┗━━━┛┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┏━━━━━┳━━━━━┳━━━━━┓ ┃┏━━━┓┃┏━━━┓┃┏━━━┓┃ ┃┃ ┃┃┃ ┃┃┃ ┃┃ ┃┃ ┃┃┃ ｂ ┃┃┃ ｃ ┃┃ ┃┃ ┃┃┃ ┃┃┃ ┃┃ ┃┃ ┃┃┗━━━┛┃┃ ┃┃ ┃┃ ａ ┃┃ ┃┃ ┃┃ ┃┃ ┃┃ ┃┗━━━┛┃ ┃┃ ┃┃ ┃ ┃ ┃┃ ┃┃ ┃ ┃ ┃┗━━━┛┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┏━━━━━┳━━━━━┳━━━━━┓ ┃┏━━━┓┃┏━━━┓┃┏━━━┓┃ ┃┃ ┃┃┃ ┃┃┃ ┃┃ ┃┃ ┃┃┃ ｂ ┃┃┃ ｃ ┃┃ ┃┃ ┃┃┃ ┃┃┃ ┃┃ ┃┃ ┃┃┗━━━┛┃┃ ┃┃ ┃┃ ａ ┃┃┏━━━┓┃┃ ┃┃ ┃┃ ┃┃┃ ┃┃┗━━━┛┃ ┃┃ ┃┃┃ ｄ ┃┃ ┃ ┃┃ ┃┃┃ ┃┃ ┃ ┃┗━━━┛┃┗━━━┛┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┏━━━━━┳━━━━━┳━━━━━┓ ┃┏━━━┓┃┏━━━┓┃┏━━━┓┃ ┃┃ ┃┃┃ ┃┃┃ ┃┃ ┃┃ ┃┃┃ ｂ ┃┃┃ ｃ ┃┃ ┃┃ ┃┃┃ ┃┃┃ ┃┃ ┃┃ ┃┃┗━━━┛┃┃ ┃┃ ┃┃ ａ ┃┃┏━━━┓┃┃ ┃┃ ┃┃ ┃┃┃ ┃┃┗━━━┛┃ ┃┃ ┃┃┃ ｄ ┃┃┏━━━┓┃ ┃┃ ┃┃┃ ┃┃┃ ┃┃ ┃┗━━━┛┃┗━━━┛┃┃ ｅ ┃┃ ┃ ┃ ┃┃ ┃┃ ┃ ┃ ┃┗━━━┛┃ Thanks, Shaofei Cheng =============================================================
Received on Saturday, 17 March 2012 09:41:17 UTC