This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
spec:css3-regions:complex-layout-example [2014/03/06 14:30] – astearns | spec:css3-regions:complex-layout-example [2014/12/09 15:48] (current) – external edit 127.0.0.1 | ||
---|---|---|---|
Line 2: | Line 2: | ||
=== Intro === | === Intro === | ||
+ | |||
+ | Displaying the complex layouts of a typical magazine, newspaper, or textbook on the web requires capabilities beyond those available in existing CSS modules. Dynamic magazine layout in particular requires flexibility in placement of boxes for content flows. This is one purpose of the CSS regions module. | ||
+ | |||
+ | Consider the layout illustrated in this figure. | ||
{{: | {{: | ||
+ | |||
+ | The designer’s intent is to position an image in box A and to flow an article’s content from box 1 through boxes 2, 3 and 4. Note that the second box should have two columns, and the image is not contained in the article. Box 4 should auto-size to render the remainder of the article content that did not fit in the earlier boxes. | ||
+ | |||
+ | The next figure shows an example of the intended visual rendering of the content. | ||
{{: | {{: | ||
+ | |||
+ | There is no existing mechanism in CSS to associate the content with these boxes arranged in this manner so that content flows as intended. The CSS regions module properties provide that mechanism. | ||
+ | |||
+ | The following example illustrates how an < | ||
+ | |||
+ | <code css> | ||
+ | < | ||
+ | article { | ||
+ | flow-into: article-flow; | ||
+ | } | ||
+ | |||
+ | #region1, #region2, #region3, #region4 { | ||
+ | flow-from: article-flow; | ||
+ | } | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | The " | ||
=== Code === | === Code === |