HTML/CSS/Images/Image flow — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
Admin (обсуждение | вклад) м (1 версия) |
(нет различий)
| |
Текущая версия на 08:16, 26 мая 2010
Содержание
- 1 Floating the image allows the text to flow around it
- 2 Image floating left
- 3 Image Floating right
- 4 Image floating to left
- 5 Image Text wraper
- 6 image vertical align bottom
- 7 image vertical align middle
- 8 Image with clear left
- 9 Lowered text
- 10 Marginal Graphic Dropcap
- 11 Raised image
- 12 floating to right with image
- 13 Text floating around image
- 14 Two image float left and right separately
- 15 Using css to wrap text around images
- 16 vertical align 100 percent for image
- 17 Vertical-align: baseline with image
- 18 vertical-align: text-bottom and image
Floating the image allows the text to flow around it
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Wrapping text around an image</title>
<style type="text/css">
.figure {
float: left;
margin-right: 1em;
margin-bottom: .5em;
}
</style>
</head>
<body>
<p><img src="images/pizza.jpg" width="180" height="110" class="figure" alt="A close-up of one of our delicious pizzas" />
this is a text. this is a text. this is a text. this is a text.
this is a text. this is a text. this is a text. this is a text.
this is a text. this is a text. this is a text. this is a text.
this is a text. this is a text. this is a text. this is a text.
this is a text. this is a text. this is a text. this is a text.
</p>
</body>
</html>
Image floating left
<!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" xml:lang="en">
<head>
<title>float</title>
<style rel="stylesheet" type="text/css">
img {
margin: 3px;
border: 1px solid rgb(128, 128, 128);
}
p {
font: 12px sans-serif;
}
div#fifty-states {
text-align: center;
border: 1px solid rgb(200, 200, 200);
background: lightyellow;
margin: 5px;
float: left;
}
</style>
</head>
<body>
<div id="fifty-states">
<img src="http://www.wbex.ru/style/logo.png" alt="" />
<p>
Sed non dolor ut.
</p>
</div>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc
eros leo, molestie eu, laoreet eu, rhoncus suscipit, tortor.
Fusce interdum, metus eu sagittis mollis, lorem augue fringilla
leo, at pretium magna tortor sed ligula. Nulla id nisl. Cras
interdum velit sit amet lacus. In egestas. Integer aliquet.
Phasellus sagittis congue dui. Aenean purus neque, viverra at,
imperdiet sit amet, dignissim vel, sapien. Suspendisse tristique.
Fusce nunc. Pellentesque ultrices magna in leo. Vestibulum
aliquam quam fermentum sapien. Aenean velit erat, vestibulum sit
amet, rhoncus a, viverra vitae, lacus. Etiam porttitor, mauris ut
vulputate egestas, tortor dolor tincidunt leo, non scelerisque
magna dui vitae urna. Vivamus ut massa. Vestibulum sit amet
sapien et magna varius auctor. Sed a magna. Pellentesque nonummy
odio nec metus. Pellentesque habitant morbi tristique senectus et
netus et malesuada fames ac turpis egestas.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc
eros leo, molestie eu, laoreet eu, rhoncus suscipit, tortor.
Fusce interdum, metus eu sagittis mollis, lorem augue fringilla
leo, at pretium magna tortor sed ligula. Nulla id nisl. Cras
interdum velit sit amet lacus. In egestas. Integer aliquet.
Phasellus sagittis congue dui. Aenean purus neque, viverra at,
imperdiet sit amet, dignissim vel, sapien. Suspendisse tristique.
Fusce nunc. Pellentesque ultrices magna in leo. Vestibulum
aliquam quam fermentum sapien. Aenean velit erat, vestibulum sit
amet, rhoncus a, viverra vitae, lacus. Etiam porttitor, mauris ut
vulputate egestas, tortor dolor tincidunt leo, non scelerisque
magna dui vitae urna. Vivamus ut massa. Vestibulum sit amet
sapien et magna varius auctor. Sed a magna. Pellentesque nonummy
odio nec metus. Pellentesque habitant morbi tristique senectus et
netus et malesuada fames ac turpis egestas.
</p>
</body>
</html>
Image Floating right
<!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" xml:lang="en">
<head>
<title>float</title>
<style rel="stylesheet" type="text/css">
img {
margin: 10px;
border: 1px solid rgb(128, 128, 128);
}
span#myImage {
text-align: center;
border: 1px solid rgb(200, 200, 200);
background: rgb(244, 244, 244);
margin: 5px;
float: right;
}
</style>
</head>
<body>
<p>
<span id="myImage">
<img src="http://www.wbex.ru/style/logo.png" alt="" />
<br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</span>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc
eros leo, molestie eu, laoreet eu, rhoncus suscipit, tortor.
Fusce interdum, metus eu sagittis mollis, lorem augue fringilla
leo, at pretium magna tortor sed ligula. Nulla id nisl. Cras
interdum velit sit amet lacus. In egestas. Integer aliquet.
Phasellus sagittis congue dui. Aenean purus neque, viverra at,
imperdiet sit amet, dignissim vel, sapien. Suspendisse tristique.
Fusce nunc. Pellentesque ultrices magna in leo. Vestibulum
aliquam quam fermentum sapien. Aenean velit erat, vestibulum sit
amet, rhoncus a, viverra vitae, lacus. Etiam porttitor, mauris ut
vulputate egestas, tortor dolor tincidunt leo, non scelerisque
magna dui vitae urna. Vivamus ut massa. Vestibulum sit amet
sapien et magna varius auctor. Sed a magna. Pellentesque nonummy
odio nec metus. Pellentesque habitant morbi tristique senectus et
netus et malesuada fames ac turpis egestas.
</p>
<p>
Sed non dolor ut tortor imperdiet hendrerit. Etiam malesuada.
Proin rutrum ligula eu nibh. Maecenas sit amet est. In eros.
Proin elit lacus, volutpat at, sagittis et, convallis sit amet,
sapien. Fusce bibendum augue vitae sapien. Morbi feugiat
venenatis libero. Vestibulum porttitor. Cras neque ante, luctus
luctus, elementum volutpat, euismod eget, nunc. Praesent ornare.
Mauris cursus dolor.
</p>
</body>
</html>
Image floating to left
<!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" xml:lang="en">
<head>
<title>float</title>
<style rel="stylesheet" type="text/css">
img {
margin: 10px;
border: 1px solid rgb(128, 128, 128);
float: left;
}
img#myImage {
clear: left;
}
</style>
</head>
<body>
<img src="http://www.wbex.ru/style/logo.png" alt="" id="john-lennon" />
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc
eros leo, molestie eu, laoreet eu, rhoncus suscipit, tortor.
Fusce interdum, metus eu sagittis mollis, lorem augue fringilla
leo, at pretium magna tortor sed ligula. Nulla id nisl. Cras
interdum velit sit amet lacus. In egestas. Integer aliquet.
Phasellus sagittis congue dui. Aenean purus neque, viverra at,
imperdiet sit amet, dignissim vel, sapien. Suspendisse tristique.
Fusce nunc. Pellentesque ultrices magna in leo. Vestibulum
aliquam quam fermentum sapien. Aenean velit erat, vestibulum sit
amet, rhoncus a, viverra vitae, lacus. Etiam porttitor, mauris ut
vulputate egestas, tortor dolor tincidunt leo, non scelerisque
magna dui vitae urna. Vivamus ut massa. Vestibulum sit amet
sapien et magna varius auctor. Sed a magna. Pellentesque nonummy
odio nec metus. Pellentesque habitant morbi tristique senectus et
netus et malesuada fames ac turpis egestas.
</p>
<img src="http://www.wbex.ru/style/logo.png" alt="" id="myImage" />
<p>
Sed non dolor ut tortor imperdiet hendrerit. Etiam malesuada.
Proin rutrum ligula eu nibh. Maecenas sit amet est. In eros.
Proin elit lacus, volutpat at, sagittis et, convallis sit amet,
sapien. Fusce bibendum augue vitae sapien. Morbi feugiat
venenatis libero. Vestibulum porttitor. Cras neque ante, luctus
luctus, elementum volutpat, euismod eget, nunc. Praesent ornare.
Mauris cursus dolor.
</p>
<p>
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; Curabitur vitae neque sed nisi luctus
accumsan. Nulla tincidunt, risus sed sodales molestie, sem eros
luctus tellus, ut tempus elit dolor quis mauris. Donec pharetra
sollicitudin turpis. Vivamus fermentum interdum enim. Proin
sollicitudin eros at neque. Nullam vel turpis ac risus interdum
ultrices. Cras sit amet diam in arcu ultrices rhoncus. Integer id
sapien. Fusce adipiscing. Donec lectus tortor, molestie a, porta
at, tristique sed, enim. Aliquam a lorem a nisl fringilla porta.
Ut aliquet arcu nec arcu. Sed in elit et pede viverra tempus.
Duis nisi est, posuere sit amet, venenatis eu, faucibus nec, velit.
Vestibulum malesuada tristique urna. Fusce ut est. Sed adipiscing
nunc sed mi. Vivamus velit nibh, viverra et, cursus et, commodo nec,
metus. Sed bibendum est in odio.
</p>
</body>
</html>
Image Text wraper
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
.image-container {
width: 30%;
border: 1px solid #000;
background: #ffffc;
}
.image-container img {
float: left;
margin: 7px
}
p {
margin: 0;
padding: 2px;
}
.dontwrap p {
margin-left: 120px
}
</style>
</head>
<body>
<div class="image-container"> <img src="http://www.wbex.ru/style/logo.png" width="100" height="75" alt="pretty picture"/>
<p>this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test. this is a test. </p>
</div>
<div class="image-container dontwrap"> <img src="http://www.wbex.ru/style/logo.png" width="100" height="75" alt="pretty picture" />
<p>this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test. </p>
</div>
</body>
</html>
image vertical align bottom
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
p {
font-family: sans-serif;
width: 200px;
margin: 10px;
padding: 10px;
border: 1px solid black;
font-size: 16px;
}
img {
vertical-align: bottom;
}
</style>
</head>
<body>
<p>
The bottom of the image <img src="http://www.wbex.ru/style/logo.png"/> is aligned vertically with the bottom of the line box.
</p>
</body>
</html>
image vertical align middle
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
p {
font-family: sans-serif;
width: 200px;
margin: 10px;
padding: 10px;
border: 1px solid black;
font-size: 16px;
}
img {
vertical-align: middle;
}
</style>
</head>
<body>
<p>
The image <img src="http://www.wbex.ru/style/logo.png"/> is aligned to the center of the line.
</p>
</body>
</html>
Image with clear left
<!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" xml:lang="en">
<head>
<title>float</title>
<style rel="stylesheet" type="text/css">
img {
margin: 10px;
border: 1px solid rgb(128, 128, 128);
float: left;
}
img#myImage {
clear: left;
}
</style>
</head>
<body>
<img src="http://www.wbex.ru/style/logo.png" alt="" id="john-lennon" />
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc
eros leo, molestie eu, laoreet eu, rhoncus suscipit, tortor.
Fusce interdum, metus eu sagittis mollis, lorem augue fringilla
leo, at pretium magna tortor sed ligula. Nulla id nisl. Cras
interdum velit sit amet lacus. In egestas. Integer aliquet.
Phasellus sagittis congue dui. Aenean purus neque, viverra at,
imperdiet sit amet, dignissim vel, sapien. Suspendisse tristique.
Fusce nunc. Pellentesque ultrices magna in leo. Vestibulum
aliquam quam fermentum sapien. Aenean velit erat, vestibulum sit
amet, rhoncus a, viverra vitae, lacus. Etiam porttitor, mauris ut
vulputate egestas, tortor dolor tincidunt leo, non scelerisque
magna dui vitae urna. Vivamus ut massa. Vestibulum sit amet
sapien et magna varius auctor. Sed a magna. Pellentesque nonummy
odio nec metus. Pellentesque habitant morbi tristique senectus et
netus et malesuada fames ac turpis egestas.
</p>
<img src="http://www.wbex.ru/style/logo.png" alt="" id="myImage" />
<p>
Sed non dolor ut tortor imperdiet hendrerit. Etiam malesuada.
Proin rutrum ligula eu nibh. Maecenas sit amet est. In eros.
Proin elit lacus, volutpat at, sagittis et, convallis sit amet,
sapien. Fusce bibendum augue vitae sapien. Morbi feugiat
venenatis libero. Vestibulum porttitor. Cras neque ante, luctus
luctus, elementum volutpat, euismod eget, nunc. Praesent ornare.
Mauris cursus dolor.
</p>
<p>
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; Curabitur vitae neque sed nisi luctus
accumsan. Nulla tincidunt, risus sed sodales molestie, sem eros
luctus tellus, ut tempus elit dolor quis mauris. Donec pharetra
sollicitudin turpis. Vivamus fermentum interdum enim. Proin
sollicitudin eros at neque. Nullam vel turpis ac risus interdum
ultrices. Cras sit amet diam in arcu ultrices rhoncus. Integer id
sapien. Fusce adipiscing. Donec lectus tortor, molestie a, porta
at, tristique sed, enim. Aliquam a lorem a nisl fringilla porta.
Ut aliquet arcu nec arcu. Sed in elit et pede viverra tempus.
Duis nisi est, posuere sit amet, venenatis eu, faucibus nec, velit.
Vestibulum malesuada tristique urna. Fusce ut est. Sed adipiscing
nunc sed mi. Vivamus velit nibh, viverra et, cursus et, commodo nec,
metus. Sed bibendum est in odio.
</p>
</body>
</html>
Lowered text
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css" media="Screen">
div {
border: 1px solid black;
}
* .lowered {
vertical-align: -1em;
}
</style>
</head>
<body>
<div>
<span class="lowered">lowered 1em </span>
<img class="lowered" src="http://www.wbex.ru/style/logo.png" alt="star" />baseline
</div>
</body>
</html>
Marginal Graphic Dropcap
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
* .indent {
position: relative;
margin-left: 120px;
}
* .graphic-dropcap {
position: absolute;
width: 120px;
height: 90px;
left: -120px;
top: 0;
}
* .graphic-dropcap span {
position: absolute;
width: 120px;
height: 90px;
margin: 0;
left: 0;
top: 0;
background: url("http://www.wbex.ru/style/logo.png") no-repeat;
}
</style>
</head>
<body>
<h1>Marginal Graphic Dropcap</h1>
<p class="indent"><span class="graphic-dropcap" >M<span>Inner span</span></span>
</p>
</body>
</html>
Raised image
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css" media="Screen">
div {
border: 1px solid black;
}
* .raised {
vertical-align: 1em;
}
</style>
</head>
<body>
<div>
<img class="raised" src="http://www.wbex.ru/style/logo.png" alt="star" />baseline
</div>
</body>
</html>
floating to right with image
<!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" xml:lang="en">
<head>
<title>float</title>
<style rel="stylesheet" type="text/css">
img {
margin: 10px;
border: 1px solid rgb(128, 128, 128);
}
span#myImage {
text-align: center;
border: 1px solid rgb(200, 200, 200);
background: rgb(244, 244, 244);
margin: 5px;
float: right;
}
</style>
</head>
<body>
<p>
<span id="myImage">
<img src="http://www.wbex.ru/style/logo.png" alt="" />
<br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</span>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc
eros leo, molestie eu, laoreet eu, rhoncus suscipit, tortor.
Fusce interdum, metus eu sagittis mollis, lorem augue fringilla
leo, at pretium magna tortor sed ligula. Nulla id nisl. Cras
interdum velit sit amet lacus. In egestas. Integer aliquet.
Phasellus sagittis congue dui. Aenean purus neque, viverra at,
imperdiet sit amet, dignissim vel, sapien. Suspendisse tristique.
Fusce nunc. Pellentesque ultrices magna in leo. Vestibulum
aliquam quam fermentum sapien. Aenean velit erat, vestibulum sit
amet, rhoncus a, viverra vitae, lacus. Etiam porttitor, mauris ut
vulputate egestas, tortor dolor tincidunt leo, non scelerisque
magna dui vitae urna. Vivamus ut massa. Vestibulum sit amet
sapien et magna varius auctor. Sed a magna. Pellentesque nonummy
odio nec metus. Pellentesque habitant morbi tristique senectus et
netus et malesuada fames ac turpis egestas.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc
eros leo, molestie eu, laoreet eu, rhoncus suscipit, tortor.
Fusce interdum, metus eu sagittis mollis, lorem augue fringilla
leo, at pretium magna tortor sed ligula. Nulla id nisl. Cras
interdum velit sit amet lacus. In egestas. Integer aliquet.
Phasellus sagittis congue dui. Aenean purus neque, viverra at,
imperdiet sit amet, dignissim vel, sapien. Suspendisse tristique.
Fusce nunc. Pellentesque ultrices magna in leo. Vestibulum
aliquam quam fermentum sapien. Aenean velit erat, vestibulum sit
amet, rhoncus a, viverra vitae, lacus. Etiam porttitor, mauris ut
vulputate egestas, tortor dolor tincidunt leo, non scelerisque
magna dui vitae urna. Vivamus ut massa. Vestibulum sit amet
sapien et magna varius auctor. Sed a magna. Pellentesque nonummy
odio nec metus. Pellentesque habitant morbi tristique senectus et
netus et malesuada fames ac turpis egestas.
</p>
</body>
</html>
Text floating around image
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#outer{
width:50%;
margin:auto;
background:#ccc;
border:1px solid #000;
position:relative;
overflow:auto;
}
#outer div {
position:absolute;
bottom:0;
left:0;
margin-right:320px;
width:100%;
}
#outer div p {
margin-right:320px;
}
#outer img{
float:right;
margin:30px 10px
}
</style>
</head>
<body>
<div id="outer">
<img src="http://www.wbex.ru/style/logo.png" alt="" width="300" height="225" />
<div><p>this is a test. this is a test. this is a test. this is a test. </p></div>
</div>
</body>
</html>
Two image float left and right separately
<!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" xml:lang="en">
<head>
<title>float</title>
<style rel="stylesheet" type="text/css">
img {
margin: 10px;
border: 1px solid rgb(128, 128, 128);
}
img#starfish {
float: left;
}
img#lake {
float: right;
}
</style>
</head>
<body>
<img src="http://www.wbex.ru/style/logo.png" alt="" id="starfish" />
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc
eros leo, molestie eu, laoreet eu, rhoncus suscipit, tortor.
Fusce interdum, metus eu sagittis mollis, lorem augue fringilla
leo, at pretium magna tortor sed ligula. Nulla id nisl. Cras
interdum velit sit amet lacus. In egestas. Integer aliquet.
Phasellus sagittis congue dui. Aenean purus neque, viverra at,
imperdiet sit amet, dignissim vel, sapien. Suspendisse tristique.
<img src="http://www.wbex.ru/style/logo.png" alt="" id="lake" />
Fusce nunc. Pellentesque ultrices magna in leo. Vestibulum
aliquam quam fermentum sapien. Aenean velit erat, vestibulum sit
amet, rhoncus a, viverra vitae, lacus. Etiam porttitor, mauris ut
vulputate egestas, tortor dolor tincidunt leo, non scelerisque
magna dui vitae urna. Vivamus ut massa. Vestibulum sit amet
sapien et magna varius auctor. Sed a magna. Pellentesque nonummy
odio nec metus. Pellentesque habitant morbi tristique senectus et
netus et malesuada fames ac turpis egestas.
</p>
<p>
Sed non dolor ut tortor imperdiet hendrerit. Etiam malesuada.
Proin rutrum ligula eu nibh. Maecenas sit amet est. In eros.
Proin elit lacus, volutpat at, sagittis et, convallis sit amet,
sapien. Fusce bibendum augue vitae sapien. Morbi feugiat
venenatis libero. Vestibulum porttitor. Cras neque ante, luctus
luctus, elementum volutpat, euismod eget, nunc. Praesent ornare.
Mauris cursus dolor.
</p>
</body>
</html>
Using css to wrap text around images
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css" title="text/css">
body {
background: #aaaaaa;
}
div#content img {
border: 1px solid #000000;
}
div#content .photo {
border-width: 8px 8px 20px 8px;
border-style: solid;
border-color: #ffffff;
float: right;
margin-left: 20px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div id="content">
<img class="photo" src="http://www.wbex.ru/style/logo.png" height="300" width="300" alt="photo" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed aliquet elementum erat. Integer diam mi, venenatis non, cursus a, hendrerit at, mi. Morbi risus mi, tincidunt ornare, tempus ut, eleifend nec, risus.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed aliquet elementum erat. Integer diam mi, venenatis non, cursus a, hendrerit at, mi. Morbi risus mi, tincidunt ornare, tempus ut, eleifend nec, risus.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed aliquet elementum erat. Integer diam mi, venenatis non, cursus a, hendrerit at, mi. Morbi risus mi, tincidunt ornare, tempus ut, eleifend nec, risus.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed aliquet elementum erat. Integer diam mi, venenatis non, cursus a, hendrerit at, mi. Morbi risus mi, tincidunt ornare, tempus ut, eleifend nec, risus.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed aliquet elementum erat. Integer diam mi, venenatis non, cursus a, hendrerit at, mi. Morbi risus mi, tincidunt ornare, tempus ut, eleifend nec, risus.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed aliquet elementum erat. Integer diam mi, venenatis non, cursus a, hendrerit at, mi. Morbi risus mi, tincidunt ornare, tempus ut, eleifend nec, risus.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed aliquet elementum erat. Integer diam mi, venenatis non, cursus a, hendrerit at, mi. Morbi risus mi, tincidunt ornare, tempus ut, eleifend nec, risus.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed aliquet elementum erat. Integer diam mi, venenatis non, cursus a, hendrerit at, mi. Morbi risus mi, tincidunt ornare, tempus ut, eleifend nec, risus.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed aliquet elementum erat. Integer diam mi, venenatis non, cursus a, hendrerit at, mi. Morbi risus mi, tincidunt ornare, tempus ut, eleifend nec, risus.</p>
</div>
</body>
</html>
vertical align 100 percent for image
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
p {
width: 200px;
margin: 10px;
padding: 10px;
border: 1px solid black;
font-size: 16px;
}
img {
vertical-align: 100%;
}
</style>
</head>
<body>
<p>
The image <img src="http://www.wbex.ru/style/logo.png"/> is aligned vertically 100% of the height of the line it appears on.
</p>
</body>
</html>
Vertical-align: baseline with image
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css" media="Screen">
div {
font-size: 60px;
line-height: normal;
border: 1px solid black;
}
* .text {
font-size: 18px;
}
* .baseline {
vertical-align: baseline;
}
</style>
</head>
<body>
<div>
<img class="baseline" src="http://www.wbex.ru/style/logo.png" alt="bar" />
<span class="baseline text"> baseline</span>
</div>
</body>
</html>
vertical-align: text-bottom and image
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css" media="Screen">
div {
font-size: 60px;
line-height: normal;
border: 1px solid black;
}
* .text {
font-size: 18px;
}
* .text-bottom {
vertical-align: text-bottom;
}
</style>
</head>
<body>
<div>
<img class="text-bottom" src="http://www.wbex.ru/style/logo.png" alt="bar" />
<span class="text-bottom text"> text-bottom</span>
</div>
</body>
</html>