-
Notifications
You must be signed in to change notification settings - Fork 1
/
demo1.html
62 lines (48 loc) · 7.02 KB
/
demo1.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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!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=iso-8859-1" />
<title>Exampe Mix</title>
<style>
body{ }
.row{ display:table; width:90%; margin:0 auto;}
.cell{ display:table-cell; padding-left:10px }
</style>
</head>
<body>
<div class="row">
<div class="cell" style="background-color:#aaa; width:100px"><strong>Width:200px</strong></div>
<div class="cell" style="background-color:#bbb;"><strong>Fluid</strong>. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ipsum leo, aliquam a lobortis nec, dictum ac quam. Mauris non leo pharetra erat commodo pharetra sed non mi. Nunc at placerat sapien. Suspendisse nec odio ornare neque scelerisque pharetra facilisis eu nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ipsum leo, aliquam a lobortis nec, dictum ac quam. Mauris non leo pharetra erat commodo pharetra sed non mi. Nunc at placerat sapien. Suspendisse nec odio ornare neque scelerisque pharetra facilisis eu nunc.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ipsum leo, aliquam a lobortis nec, dictum ac quam. Mauris non leo pharetra erat commodo pharetra sed.</div>
</div>
<div class="row">
<div class="cell" style="background-color:#aaa; width:250px"><strong>Width:250px.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ipsum leo, aliquam a lobortis nec, dictum ac quam. Mauris non leo pharetra erat commodo pharetra sed non mi. Nunc at placerat sapien. Suspendisse nec odio ornare neque scelerisque pharetra facilisis eu nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
<div class="cell" style="background-color:#bbb;"><strong>Fluid.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ipsum leo, aliquam a lobortis nec, dictum ac quam. Mauris non leo pharetra erat commodo pharetra sed non mi. Nunc at placerat sapien. Suspendisse nec odio ornare neque scelerisque pharetra facilisis eu nunc. </div>
<div class="cell" style="background-color:#ccc; width:100px"><strong>Width:100px.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ipsum leo, aliquam a lobortis nec, dictum ac quam. Mauris non leo pharetra erat commodo pharetra sed non mi. </div>
</div>
<div class="row">
<div class="cell" style="background-color:#999; width:100px;"><strong>Width:100px.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ipsum leo, aliquam a lobortis nec, dictum ac quam. Mauris non leo pharetra erat commodo pharetra sed non mi. </div>
<div class="cell" style="background-color:#888; width:100px;"><strong>Width:100px</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ipsum leo, aliquam a lobortis nec, dictum ac quam. Mauris non leo pharetra erat commodo pharetra sed non mi. Nunc at placerat sapien. </div>
<div class="cell" style="background-color:#777;"><strong>Fluid.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ipsum leo, aliquam a lobortis nec, dictum ac quam. Mauris non leo pharetra erat commodo pharetra sed non mi. Nunc at placerat sapien. Suspendisse nec odio ornare neque scelerisque pharetra facilisis eu nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="cell" style="background-color:#666; width:150px"><strong>Width:150px.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ipsum leo, aliquam a lobortis nec, dictum ac quam. Mauris non leo pharetra erat commodo pharetra sed non mi. </div>
<div class="cell" style="background-color:#666; width:100px"><strong>Width:100px.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ipsum leo, aliquam a lobortis nec, dictum ac quam. Mauris non leo pharetra erat commodo pharetra sed non mi. </div>
</div>
<div class="row">
<div class="cell" style="background-color:#aaa; width:150px"><strong>width:150px</strong> Mauris non leo pharetra erat commodo pharetra sed non mi. Nunc at placerat sapien. Suspendisse nec odio ornare neque scelerisque pharetra facilisis eu nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="cell" style="background-color:#bbb;"><strong>Fluid</strong> Mauris non leo pharetra erat commodo pharetra sed non mi. Nunc at placerat sapien. Suspendisse nec odio ornare neque scelerisque pharetra facilisis eu nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="cell" style="background-color:#ccc;"><strong>Fluid</strong> Mauris non leo pharetra erat commodo pharetra sed non mi. Nunc at placerat sapien. Suspendisse nec odio ornare neque scelerisque pharetra facilisis eu nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="cell" style="background-color:#ccc;"><strong>Fluid</strong> Mauris non leo pharetra erat commodo pharetra sed non mi. Nunc at placerat sapien. Suspendisse nec odio ornare neque scelerisque pharetra facilisis eu nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="cell" style="background-color:#ccc;width:100px"><strong>width:100px</strong> Mauris non leo pharetra erat commodo pharetra sed non mi. Nunc at placerat sapien. Suspendisse nec odio ornare neque scelerisque pharetra facilisis eu nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
<div class="row">
<div class="cell" style="background-color:#aaa; width:10%"><strong>width:10%</strong> Mauris non leo pharetra erat commodo pharetra sed non mi. Nunc at placerat sapien. Suspendisse nec odio ornare neque scelerisque pharetra facilisis eu nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="cell" style="background-color:#bbb;"><strong>Fluid</strong> Mauris non leo pharetra erat commodo pharetra sed non mi. Nunc at placerat sapien. Suspendisse nec odio ornare neque scelerisque pharetra facilisis eu nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="cell" style="background-color:#ccc;"><strong>Fluid</strong> Mauris non leo pharetra erat commodo pharetra sed non mi. Nunc at placerat sapien. Suspendisse nec odio ornare neque scelerisque pharetra facilisis eu nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="cell" style="background-color:#ddd;width:10em"><strong>width:10em</strong> Mauris non leo pharetra erat commodo pharetra sed non mi. Nunc at placerat sapien. Suspendisse nec odio ornare neque scelerisque pharetra facilisis eu nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="cell" style="background-color:#eee;width:30em"><strong>width:30em</strong> Mauris non leo pharetra erat commodo pharetra sed non mi. Nunc at placerat sapien. Suspendisse nec odio ornare neque scelerisque pharetra facilisis eu nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
<div class="row">
<div class="cell" style="color:red; background-color:#ccc"><h1>Endless</h1> </div>
<div class="cell" style="color:blue; background-color:#ddd"><h1>Possibilites</h1></div>
</div>
</body>
</html>