-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathinline_block.html
50 lines (46 loc) · 2.36 KB
/
inline_block.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
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="./style/reset.css" />
<link rel="stylesheet" type="text/css" href="./style/main.css" />
<style type="text/css">
.inline-block {
vertical-align: baseline;
}
.image-list {
width: 315px;
}
.image-list > li {
display: inline-block;
vertical-align: top;
border: 1px solid #000;
}
.image-list > li img {
vertical-align: middle;
}
</style>
</head>
<body>
<h4 class="bold m-bottom10">Inline-block:</h4>
<div>
<img src="http://lorempixel.com/200/200/" alt="lorempixel.com">
<div class="inline-block w200">
<div class="p10 bc-yellow">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum leo at gravida tristique. Integer egestas iaculis elit, in sollicitudin justo. Aenean lacinia nunc et mauris maximus, sit amet pellentesque dolor ultricies. Aenean volutpat porttitor nisl, quis mattis urna ultricies at. Cras elementum ante ut libero rutrum, non auctor nunc volutpat. Vivamus lobortis tincidunt nulla eu hendrerit. Morbi ac nisi nunc. Mauris ac risus ac nibh dignissim dignissim. Nulla ante risus, aliquet placerat tempus nec, tristique non ipsum. Aenean eu lectus eros.</div>
</div>
</div>
<h4 class="bold m-bottom10 m-top20">Images have different height</h4>
<ul class="image-list clearfix">
<li><img src="http://placehold.it/100x100&text=1"/></li>
<li><img src="http://placehold.it/100x120&text=2"/></li>
<li><img src="http://placehold.it/100x110&text=3"/></li>
<li><img src="http://placehold.it/100x100&text=4"/></li>
<li><img src="http://placehold.it/100x100&text=5"/></li>
<li><img src="http://placehold.it/100x140&text=6"/></li>
<li><img src="http://placehold.it/100x50&text=7"/></li>
<li><img src="http://placehold.it/100x100&text=8"/></li>
<li><img src="http://placehold.it/100x70&text=9"/></li>
</ul>
</body>
</html>