-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
102 lines (70 loc) · 3.71 KB
/
index.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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<!-- Use the .htaccess and remove these lines to avoid edge case issues.
More info: h5bp.com/i/378 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Cloud Science</title>
<meta name="description" content="">
<!-- Mobile viewport optimized: h5bp.com/viewport -->
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/style.css">
<body>
<header>
</header>
<div role="main" class="container">
<h2>Without wrapping classes</h2>
<p>Long text without spaces <strong>doesn't</strong> wrap</p>
<div style="width:300px">
<div style="border: 1px solid black;min-height:120px">
<div class="img">
<img src="http://placehold.it/160x120" alt="">
</div>
<div class="bd" style="display: table-cell;">fdsfdsafdsklffsadkjfwoqkhrewqkjerwq;deqewqkrejqhrtewqpoqwrewqneqwenwfdsafdjdsakafjdkfjdsaklladf</div>
</div>
</div>
<br/>
<br/>
<p>Long text with spaces <strong>does</strong> wrap only on word boundaries</p>
<div style="width:300px">
<div style="border: 1px solid black;min-height:120px">
<div class="img">
<img src="http://placehold.it/160x120" alt="">
</div>
<div style="display: table-cell;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</div>
<h2>With wrapping classes</h2>
<p>Long text without spaces <strong>does</strong> now wrap</p>
<div style="width:300px">
<div class="img-block" style="border: 1px solid black;min-height:120px">
<div class="img">
<img src="http://placehold.it/160x120" alt="">
</div>
<div style="display: table-cell;">fdsfdsafdsklffsadkjfwoqkhrewqkjerwq;deqewqkrejqhrtewqpoqwrewqneqwenwfdsafdjdsakafjdkfjdsaklladf</div>
</div>
</div>
<br/><br/>
<p>Long text with spaces <strong>does not</strong> wrap only on word boundaries, rather at the defined width</p>
<div style="width:300px">
<div class="img-block" style="border: 1px solid black;min-height:120px">
<div class="img">
<img src="http://placehold.it/160x120" alt="">
</div>
<div style="display: table-cell;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</div>
</div>
</div>
</div>
<footer>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</body>
</html>