в 09:20, 26 мая 2010

2010-05-26T09:20:59Z

Admin: 1 версия

2010-05-26T08:16:09Z

1 версия

Новая страница

==clear: both==



<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>
<title>Easy Clearing method </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#parent1 {
border: 5px solid purple;
padding: 10px;
}
.floatleft {
border: 5px solid red;
float: left;
width: 200px;
background: white;
}
.floatright {
border: 5px solid green;
float: right;
width: 200px;
background: white;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-table;
}
</style>
</head>
<body>
<div id="parent1" class="clearfix">
<p>This is the first parent container</p>
<p class="floatleft">This is floated content.</p>
<p class="floatright">This is floated content.</p>
</div>
</body>
</html>
</source>

=="clear" Example==



<source lang="html4strict">

<html>
<head>
<style>
#secL {
position:absolute;
}
.style1 {
clear:left!important;
}
.style2 {
clear:none!important;
}
</style>
</head>
<body>
<img src="http://www.wbex.ru/style/logo.png"
width="71"
height="99"
style="float:left">
<a id="myL"
href="http://www.wbex.ru"
onClick="this.className="style2";return false"
onMouseOver="this.className="style1"">
Disabled link
</a>
<img src="http://www.wbex.ru/style/logo.png"
alt="This is a float=right image"
width="79"
height="99">
</body>
</html>

</source>

==clear: left with 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">
p {
border: 1px solid black;
background: rgb(218, 218, 218);
line-height: 1em;
padding: 10px;
}
p#floated {
float: left;
margin: 10px;
}
p#cleared {
clear: left;
}
</style>
</head>
<body>
<p id="floated">
This is the text of the first paragraph.
</p>
<p id="cleared">
This is the text of the second paragraph.
</p>
</body>
</html>
</source>

==clear: left with float 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>
<head>
<title></title>
<style type="text/css">
body {
margin: 0;
padding: 8px;
}
p {
border: 1px solid black;
background: rgb(218, 218, 218);
line-height: 1em;
padding: 10px;
}
p#left {
width: 200px;
float: left;
margin: 10px;
background: #ccc;
}
p#right {
width: 200px;
float: right;
margin: 10px;
background: #aaa;
}
p#clear {
clear: left;
background: #eee;
}
</style>
</head>
<body>
<p id="left">
This is the text of the first paragraph.
This is the text of the first paragraph.
This is the text of the first paragraph.
This is the text of the first paragraph.
</p>
<p id="right">
This is the text of the second paragraph.
This is the text of the second paragraph.
This is the text of the second paragraph.
This is the text of the second paragraph.
This is the text of the second paragraph.
This is the text of the second paragraph.
This is the text of the second paragraph.
This is the text of the second paragraph.
</p>
<p>
This is the text of the third paragraph.
</p>
<p id="clear">
This is the text of the forth paragraph.
</p>
</body>
</html>
</source>

← Предыдущая	Версия 09:20, 26 мая 2010
(нет различий)

HTML/CSS/CSS Attributes and Javascript Style Properties/clear - История изменений

в 09:20, 26 мая 2010

Admin: 1 версия