W3C home > Mailing lists > Public > public-html-ig-zh@w3.org > March 2012

Re: 答复: 答复: 答复: 能否给flaot加一个选项:float:top-left

From: 程劭非 <csf178@gmail.com>
Date: Sat, 17 Mar 2012 17:40:48 +0800
Message-ID: <CAFAEBoN-VeDuRYKXW=HobwM-L8woaiqiJdfLxsgYuhTDjQjK4w@mail.gmail.com>
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:
┏━━━━━┳━━━━━┳━━━━━┓
┃┏━━━┓┃     ┃     ┃
┃┃   ┃┃     ┃     ┃
┃┃   ┃┃     ┃     ┃
┃┃   ┃┃     ┃     ┃
┃┃   ┃┃     ┃     ┃
┃┃ a ┃┃     ┃     ┃
┃┃   ┃┃     ┃     ┃
┃┃   ┃┃     ┃     ┃
┃┃   ┃┃     ┃     ┃
┃┗━━━┛┃     ┃     ┃
┃     ┃     ┃     ┃
┃     ┃     ┃     ┃
┏━━━━━┳━━━━━┳━━━━━┓
┃┏━━━┓┃┏━━━┓┃     ┃
┃┃   ┃┃┃   ┃┃     ┃
┃┃   ┃┃┃ b ┃┃     ┃
┃┃   ┃┃┃   ┃┃     ┃
┃┃   ┃┃┗━━━┛┃     ┃
┃┃ a ┃┃     ┃     ┃
┃┃   ┃┃     ┃     ┃
┃┃   ┃┃     ┃     ┃
┃┃   ┃┃     ┃     ┃
┃┗━━━┛┃     ┃     ┃
┃     ┃     ┃     ┃
┃     ┃     ┃     ┃


┏━━━━━┳━━━━━┳━━━━━┓
┃┏━━━┓┃┏━━━┓┃┏━━━┓┃
┃┃   ┃┃┃   ┃┃┃   ┃┃
┃┃   ┃┃┃ b ┃┃┃ c ┃┃
┃┃   ┃┃┃   ┃┃┃   ┃┃
┃┃   ┃┃┗━━━┛┃┃   ┃┃
┃┃ a ┃┃     ┃┃   ┃┃
┃┃   ┃┃     ┃┗━━━┛┃
┃┃   ┃┃     ┃     ┃
┃┃   ┃┃     ┃     ┃
┃┗━━━┛┃     ┃     ┃
┃     ┃     ┃     ┃
┃     ┃     ┃     ┃


┏━━━━━┳━━━━━┳━━━━━┓
┃┏━━━┓┃┏━━━┓┃┏━━━┓┃
┃┃   ┃┃┃   ┃┃┃   ┃┃
┃┃   ┃┃┃ b ┃┃┃ c ┃┃
┃┃   ┃┃┃   ┃┃┃   ┃┃
┃┃   ┃┃┗━━━┛┃┃   ┃┃
┃┃ a ┃┃┏━━━┓┃┃   ┃┃
┃┃   ┃┃┃   ┃┃┗━━━┛┃
┃┃   ┃┃┃ d ┃┃     ┃
┃┃   ┃┃┃   ┃┃     ┃
┃┗━━━┛┃┗━━━┛┃     ┃
┃     ┃     ┃     ┃
┃     ┃     ┃     ┃

┏━━━━━┳━━━━━┳━━━━━┓
┃┏━━━┓┃┏━━━┓┃┏━━━┓┃
┃┃   ┃┃┃   ┃┃┃   ┃┃
┃┃   ┃┃┃ b ┃┃┃ c ┃┃
┃┃   ┃┃┃   ┃┃┃   ┃┃
┃┃   ┃┃┗━━━┛┃┃   ┃┃
┃┃ a ┃┃┏━━━┓┃┃   ┃┃
┃┃   ┃┃┃   ┃┃┗━━━┛┃
┃┃   ┃┃┃ d ┃┃┏━━━┓┃
┃┃   ┃┃┃   ┃┃┃   ┃┃
┃┗━━━┛┃┗━━━┛┃┃ e ┃┃
┃     ┃     ┃┃   ┃┃
┃     ┃     ┃┗━━━┛┃


Thanks,
Shaofei Cheng
=============================================================
Received on Saturday, 17 March 2012 09:41:17 UTC

This archive was generated by hypermail 2.3.1 : Tuesday, 6 January 2015 20:43:50 UTC