HTML/CSS/CSS Attributes and Javascript Style Properties/float

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

"float" Example

   <source lang="html4strict">

<html> <body> <img id="myImage" 

    src="http://www.wbex.ru/style/logo.png" 
    border="0" 
    style="float:left">

<button onclick="myImage.style.styleFloat="right"">Change float to right</button> </body> </html> 


     </source>


float left

   <source lang="html4strict">

<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

       "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.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></title>
 <style type="text/css">

body { 

 margin: 0px;
 padding: 0px;
 color: #000;
 background-color: #ccc;

}

.myStyle { 

 float: left;
 padding: 10px;
 margin: 5px;
 background-color: #fff;
 border: 1px solid #000;
 width: 15%;

} 

 </style>

</head> <body>

1
2
3
4

</body> </html> 

</source>


float right

   <source lang="html4strict">

<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

       "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.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></title>
 <style type="text/css">

body { 

 margin: 0px;
 padding: 0px;
 color: #000;
 background-color: #ccc;

}

.myStyle { 

 float: right;
 padding: 10px;
 margin: 5px;
 background-color: #fff;
 border: 1px solid #000;
 width: 15%;

} 

 </style>

</head> <body>

1
2
3
4

</body> </html> 

</source>


  • float: 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> 

       <head>
       <title></title>
       <style type="text/css">
           ul {
               
               list-style: none;
               border-bottom: thin solid black;
               height: 21px;
           }
           li {
               text-align: center;
               float: left;
               margin: 0 10px;
               border: thin solid black;
               width: 100px;
           }
       </style>
   </head>
   <body>

       </body>

    </html>

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