HTML and CSS Reference
In-Depth Information
Figure 22-1. Flex layout makes it easy to align elements within their containers
The example in Figure 22-1 is in books1.html in the ch22 folder. Listing 22-1 shows how the HTML is
structured. It consists of an HTML5 <section> element containing an <article> for each book. Only the
first <article> is shown in detail.
Listing 22-1. HTML Structure for Book Descriptions
<section id="books">
<h3>HTML5 and CSS3 Web Design</h3>
<p>A contemporary update of Craig Grannell's acclaimed. . .</p>
<li>Learn the basics of HTML5 and CSS3 web design</li>
<li>Implement effective layouts. . . </li>
<figure><img src="images/html5_css3.png" width="277" height="350". . .></figure>
<button>Buy Now</button>
<article>. . .</article>
<article>. . .</article>
Notice that the image comes between the text and the button in the underlying HTML, yet it's displayed after
the <h3> heading. The order of elements has been changed with CSS. That's something a table could never achieve.
Search WWH ::

Custom Search