This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revisionLast revisionBoth sides next revision | ||
spec:css3-regions:regions-print-use-cases [2012/05/03 12:52] – astearns | spec:css3-regions:regions-print-use-cases [2012/05/08 12:06] – astearns | ||
---|---|---|---|
Line 15: | Line 15: | ||
{{ : | {{ : | ||
- | Here there are two named flows, but the contents are related. The flow running through the gutter of the main article is a timeline of events the article refers to. This can be accomplished in either continuous or paged media with sets of three regions. | + | Here there are two named flows, but the contents are related. The flow running through the gutter of the main article is a timeline of events the article refers to. This can be accomplished in either continuous or paginated contexts |
+ | |||
+ | <code css> | ||
+ | article { | ||
+ | flow-into: article-flow | ||
+ | } | ||
+ | #timeline { | ||
+ | flow-into: timeline-flow | ||
+ | } | ||
+ | # | ||
+ | overflow-style: | ||
+ | } | ||
+ | |||
+ | @template interleaved-layout{ | ||
+ | |||
+ | @slot left { | ||
+ | width: 35%; | ||
+ | float: left; | ||
+ | flow-from: article-flow; | ||
+ | } | ||
+ | |||
+ | @slot time { | ||
+ | width: 25%; | ||
+ | float: left; | ||
+ | flow-from: timeline-flow; | ||
+ | } | ||
+ | |||
+ | @slot right { | ||
+ | width: 35%; | ||
+ | float: left; | ||
+ | flow-from: article-flow; | ||
+ | } | ||
+ | } | ||
+ | </ | ||
[[http:// | [[http:// |