案例：CSS案例     状态：可编辑再运行    进入竖版
 运行结果　
​x
  <img src="/img/tulip_fringed_family_s.jpg" alt="Ballade" width="135" height="135">
 
1
<!doctype html>
2
<html>
3
<head>
4
<style>
5
div.img
6
  {
7
  margin:3px;
8
  border:1px solid #bebebe;
9
  height:auto;
10
  width:auto;
11
  float:left;
12
  text-align:center;
13
  }
14
div.img img
15
  {
16
  display:inline;
17
  margin:3px;
18
  border:1px solid #bebebe;
19
  }
20
div.img a:hover img
21
  {
22
  border:1px solid #333333;
23
  }
24
div.desc
25
  {
26
  text-align:center;
27
  font-weight:normal;
28
  width:120px;
29
  font-size:12px;
30
  margin:10px 5px 10px 5px;
31
  }
32
</style>
33
</head>
34
<body>
35
​
36
<div class="img">
37
  <a target="_blank" href="/img/tulip_ballade_s.jpg">
38
  <img src="/img/tulip_ballade_s.jpg" alt="Ballade" width="135" height="135">
39
  </a>
40
  <div class="desc">在此处添加对图像的描述</div>
41
</div>
42
​
43
<div class="img">
44
  <a target="_blank" href="/img/tulip_flaming_club_s.jpg">
45
  <img src="/img/tulip_flaming_club_s.jpg" alt="Ballade" width="135" height="135">
46
  </a>
47
  <div class="desc">在此处添加对图像的描述</div>
48
</div>