HTML/CSS/CSS Attributes and Javascript Style Properties/float
Содержание
"float" Example
<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>
float left
<?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>
<div class="myStyle">1</div>
<div class="myStyle">2</div>
<div class="myStyle">3</div>
<div class="myStyle">4</div>
</body>
</html>
float right
<?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>
<div class="myStyle">1</div>
<div class="myStyle">2</div>
<div class="myStyle">3</div>
<div class="myStyle">4</div>
</body>
</html>
float: left;
<!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>
<ul>
<li><a href="http://www.google.ru">Google</a></li>
<li><a href="http://www.yahoo.ru">Yahoo</a></li>
<li><a href="http://www.ebay.ru">Ebay</a></li>
<li><a href="http://www.wrox.ru">Wrox</a></li>
</ul>
</body>
</html>