<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Mobile-Web-App: test css</title> </head> <body> <h1>Mobile-Web-App: CSS Exercise</h1> <div id="photogrid" style="width:600px;"> <img src="http://goo.gl/BlQEX"/> <img src="http://goo.gl/BlQEX"/> <img src="http://goo.gl/BlQEX"/> <img src="http://goo.gl/BlQEX"/> <img src="http://goo.gl/BlQEX"/> <img src="http://goo.gl/BlQEX"/> <img src="http://goo.gl/BlQEX"/> <img src="http://goo.gl/BlQEX"/> <img src="http://goo.gl/BlQEX"/> <img src="http://goo.gl/BlQEX"/> <img src="http://goo.gl/BlQEX"/> <img src="http://goo.gl/BlQEX"/> <img src="http://goo.gl/BlQEX"/> <img src="http://goo.gl/BlQEX"/> </div> </body> </html>
Modify the HTML with CSS, it's easy to create grid for the pictures.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mobile-Web-App: test css</title>
<style>
#photogrid{
line-height: 0;
-webkit-column-count: 6;
-webkit-olumn-gap: 5px;
-moz-column-count: 6;
-moz-column-gap: 5px;
column-count: 6;
column-gap: 5px;
}
#photogrid img{
width: 100%;
height: auto;
margin-bottom: 5px;
}
</style>
</head>
<body>
<h1>Mobile-Web-App: CSS Exercise</h1>
<div id="photogrid" style="width:600px;">
<img src="http://goo.gl/BlQEX"/>
<img src="http://goo.gl/BlQEX"/>
<img src="http://goo.gl/BlQEX"/>
<img src="http://goo.gl/BlQEX"/>
<img src="http://goo.gl/BlQEX"/>
<img src="http://goo.gl/BlQEX"/>
<img src="http://goo.gl/BlQEX"/>
<img src="http://goo.gl/BlQEX"/>
<img src="http://goo.gl/BlQEX"/>
<img src="http://goo.gl/BlQEX"/>
<img src="http://goo.gl/BlQEX"/>
<img src="http://goo.gl/BlQEX"/>
<img src="http://goo.gl/BlQEX"/>
<img src="http://goo.gl/BlQEX"/>
</div>
</body>
</html>
No comments:
Post a Comment