HTML/CSS/Images/Image flow

Материал из Web эксперт
Перейти к: навигация, поиск

Floating the image allows the text to flow around it

   <source lang="html4strict">

<!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>

<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.

</body> </html> 

</source>


Image floating left

   <source lang="html4strict">

<!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>

           <img src="http://www.wbex.ru/style/logo.png" alt="" />

Sed non dolor ut.

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.

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. 

   </body>

</html> 

</source>


Image Floating right

   <source lang="html4strict">

<!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>

<img src="http://www.wbex.ru/style/logo.png" alt="" />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 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.

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. 

   </body>

</html> 

</source>


Image floating to left

   <source lang="html4strict">

<!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" />

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. 

       <img src="http://www.wbex.ru/style/logo.png" alt="" id="myImage" />

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.

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. 

   </body>

</html> 

</source>


Image Text wraper

   <source lang="html4strict">

<!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>

<img src="http://www.wbex.ru/style/logo.png" width="100" height="75" alt="pretty picture"/>

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.

<img src="http://www.wbex.ru/style/logo.png" width="100" height="75" alt="pretty picture" />

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.

</body> </html> 

</source>


image vertical align bottom

   <source lang="html4strict">

<!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>

The bottom of the image <img src="http://www.wbex.ru/style/logo.png"/> is aligned vertically with the bottom of the line box. 

       </body>
   </html>
</source>


image vertical align middle

   <source lang="html4strict">

<!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>

The image <img src="http://www.wbex.ru/style/logo.png"/> is aligned to the center of the line. 

       </body>
   </html>
</source>


Image with clear left

   <source lang="html4strict">

<!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" />

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. 

       <img src="http://www.wbex.ru/style/logo.png" alt="" id="myImage" />

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.

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. 

   </body>

</html> 

</source>


Lowered text

   <source lang="html4strict">

<!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>

lowered 1em <img class="lowered" src="http://www.wbex.ru/style/logo.png" alt="star" />baseline

</body> </html> 

</source>


Marginal Graphic Dropcap

   <source lang="html4strict">

<?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>

Marginal Graphic Dropcap

MInner span 

  </body>

</html> 

</source>


Raised image

   <source lang="html4strict">

<!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>

<img class="raised" src="http://www.wbex.ru/style/logo.png" alt="star" />baseline

</body> </html> 

</source>


floating to right with image

   <source lang="html4strict">

<!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>

<img src="http://www.wbex.ru/style/logo.png" alt="" />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 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.

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. 

   </body>

</html> 

</source>


Text floating around image

   <source lang="html4strict">

<!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">

  1. outer{
 width:50%;
 margin:auto;
 background:#ccc;
 border:1px solid #000;
 position:relative;
   overflow:auto;

}

  1. outer div {
 position:absolute;
 bottom:0;
 left:0;
 margin-right:320px;
 width:100%;

}

  1. outer div p {
 margin-right:320px;

}

  1. outer img{
 float:right;
 margin:30px 10px

} </style> </head> <body> 

  <img src="http://www.wbex.ru/style/logo.png" alt="" width="300" height="225" />

this is a test. this is a test. this is a test. this is a test.

</body> </html> 

</source>


Two image float left and right separately

   <source lang="html4strict">

<!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" />

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.

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. 

   </body>

</html> 

</source>


Using css to wrap text around images

   <source lang="html4strict">

<!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> 

       <img class="photo" src="http://www.wbex.ru/style/logo.png" height="300" width="300" alt="photo" />

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.

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.

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.

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.

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.

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.

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.

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.

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.

</body> </html> 

</source>


vertical align 100 percent for image

   <source lang="html4strict">

<!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>

The image <img src="http://www.wbex.ru/style/logo.png"/> is aligned vertically 100% of the height of the line it appears on. 

       </body>
   </html>
</source>


Vertical-align: baseline with image

   <source lang="html4strict">

<!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> 

   <img class="baseline" src="http://www.wbex.ru/style/logo.png" alt="bar" />
    baseline

</body> </html> 

</source>


vertical-align: text-bottom and image

   <source lang="html4strict">

<!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> 

   <img class="text-bottom" src="http://www.wbex.ru/style/logo.png" alt="bar" />
    text-bottom

</body> </html> 

</source>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Images/Image_flow&oldid=5119»