-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathfloatbox.html
43 lines (42 loc) · 1.39 KB
/
floatbox.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCRYPE html PUBLIC"-//w3c//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtml-transitional.dtd">
<head>
<title>float nature</title>
<style type="text/css">
body
{
margin:15px;
font-family:Ariala;font-size:12px;
}
.father{
backgroud-color:#ffff99;
border:1px solid #111111;
padding:5px;
}
.father div{
padding:10px;
margin:15px;
border:1px dashed #111111;
background-color:#90baff;
}
.father p{
border:1px dashed #111111;
background-color:#ff90ba;
clear:right;}
.son1{
float:left/* set the float way for son1*/}
.son2{
float:left/* set the float way for son2*/}
.son3{
float:right/*set the float way for son3*/}
</style>
</head>
<body>
<div class="father">
<div class="son1">BOX-1</div>
<div class="son2">BOX-2</div>
<div class="son3">BOX-3<br> BOX-3<br> BOX-3<br> BOX-3<br> BOX-3<br></div>
<p>this is the word outside the float form this is the word putsie the float form this is the word outdie the float form this is the word outside the float form this is the word outside the float form this is the word out side the float form this is the word outside the float form this is the word outside the float form this is the word outside the float form this is the word outside the float form this is the word outside the float form this is the word outside the float form .<p>
</div>
</body>
</html>