1 <!doctype html>
2 <html>
3
4 <head>
5 <meta charset="utf-8">
6 </head>
7 <style type="text/css">
8 #content {
9 width: 400px;
10 }
11 #content,
12 #content>.panel,
13 #content .column,
14 #content .column>li {
15 margin: 0px;
16 padding: 0px;
17 }
18 #content>.panel {
19 width: 100%;
20 background: #eee;
21 overflow-y: hidden;
22 padding-left: 5px;
23 padding-right: 5px;
24 }
25 #content .column {
26 width:190px;
27 float: left;
28 margin-left: 5px;
29 margin-right: 5px;
30
31 }
32 #content .column>li {
33 width: 100%;
34 list-style-type: none;
35 border-radius: 5px;
36 background: #fff;
37 margin-bottom: 10px;
38 margin-top: 10px;
39 overflow: hidden;
40 text-align: center;
41 }
42 #content .column img {
43 border: none;
44 vertical-align: middle;
45 }
46 </style>
47
48 <body>
49 <div id="content">
50 <div class="panel">
51 <ul class="left column">
52 <li><img src="timg.jpg" width="100%" height="65px"></li>
53 <li><img src="timg.jpg" width="100%" height="250px"></li>
54 <li><img src="timg.jpg" width="100%" height="250px"></li>
55 <li><img src="timg.jpg" width="100%" height="250px"></li>
56 <li><img src="timg.jpg" width="100%" height="250px"></li>
57 <li><img src="timg.jpg" width="100%" height="250px"></li>
58 </ul>
59
60
61 <ul class="right column">
62 <li><img src="timg.jpg" width="100%" height="200px"></li>
63 <li><img src="timg.jpg" width="100%" height="250px"></li>
64 <li><img src="timg.jpg" width="100%" height="250px"></li>
65 <li><img src="timg.jpg" width="100%" height="250px"></li>
66 <li><img src="timg.jpg" width="100%" height="250px"></li>
67 </ul>
68 </div>
69 </div>
70
71 </body>
72
73 </html>