Đang chuẩn bị liên kết để tải về tài liệu:
The CSS Anthology: 101 Essential Tips, Tricks & Hacks- P17

The CSS Anthology: 101 Essential Tips, Tricks & Hacks- P17:Apart from writing books like this one, I write code. I make my living by building web sites and applications as, I’m sure, many readers of this book do. I use CSS to complete jobs every day, and I know what it’s like to struggle to make CSS work when the project needs to be finished the next morning. | CSS Positioning and Layout 297 Here s the code for this page chapter09 float.html DOCTYPE html PUBLIC - W3C DTD XHTML 1.0 Strict EN http www.w3.org TR xhtml1 DTD xhtml1-strict.dtd html xmlns http www.w3.org 1999 xhtml lang en-US head title Float title meta http-equiv content-type content text html charset utf-8 style type text css .featureimg float left width 319px style head body h1 Chinese-style stuffed peppers h1 img src peppers1.jpg width 319 height 213 alt peppers class featureimg p These stuffed peppers are lovely as a starter or as a . p More paragraphs body html Discussion The float property takes the element out of the document flow and floats it against the edge of the block-level element that contains it. Other block-level elements will then ignore the floated element and render as if it s absent. Inline elements such as content however will make space for the floated element which is why we can use float to cause our text to wrap around an image. As we can see clearly in Figure 9.5 the text bumps right up against the side of the image. If we add a border to that image the text will collide against the side of the border. Download at WoweBook.Com 298 The CSS Anthology To create space between our image and the text we need to add a margin to the image. Since the image is aligned against the left-hand margin we only need to add right and bottom margins to move the text away from the image slightly chapter09 float2.html excerpt .featureimage float left width 319px border 2px solid 000000 margin-right 20px margin-bottom 6px Figure 9.6 shows the resulting display with extra space around the floated image. Chinese style stuffed peppers These stuffed peppers are lovely as a starter or as a side dish for a Chinese meal. They also go down well as part of a buffet and even children seem to like them. Heat the oil in a wok. Add the garlic and stir fry until golden. Reduce the heat down and then add the ginger and the mince. Stir fry until this is nicely browned .