html - Grid view at center of page in jquery mobile -
i new jquerymobile. have screen containing 3*3 grid of images. need align them @ center of page there shouldn't space between them except 1px. each cell should fit image without stretching. images having width of 100px , height of 150px. please me.
<div class="ui-grid-b"> <div class="ui-block-a"> <div class="ui-bar"> <a href="xxx.htm"> <img alt="alt..." src="bigmiracle.png" /> </a> </div> </div> <div class="ui-block-b"> <div class="ui-bar"> <a href="xxx.htm"> <img alt="alt..." src="bigmiracle.png" /> </a> </div> </div> <div class="ui-block-c"> <div class="ui-bar"> <a href="xxx.htm"> <img alt="alt..." src="bigmiracle.png" /> </a> </div> </div> <div class="ui-block-a"> <div class="ui-bar"> <a href="xxx.htm"> <img alt="alt..." src="bigmiracle.png" /> </a> </div> </div> <div class="ui-block-b"> <div class="ui-bar"> <a href="xxx.htm"> <img alt="alt..." src="bigmiracle.png" /> </a> </div> </div> <div class="ui-block-c"> <div class="ui-bar"> <a href="xxx.htm"> <img alt="alt..." src="bigmiracle.png" /> </a> </div> </div>
here screen shot.
first of all, can't done jquery mobile grid. grid made responsive , stretch. better solution create our own grid contain needed images.
i don't understand intention use:
<div class="ui-bar"> or mistake include it. have done example without it. there's no need if want grid wrap image.
here's working example: http://jsfiddle.net/gajotres/vuwaa/
html :
<!doctype html> <html> <head> <title>jqm complex demo</title> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densitydpi=device-dpi"/> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> </head> <body> <div data-role="page" id="index"> <div data-theme="b" data-role="header"> <h1>index page</h1> </div> <div data-role="content"> <div class="grid-container"> <div class="grid-row"> <a href="index.htm"> <img alt="alt..." src="http://th01.deviantart.net/fs12/150/i/2006/287/3/4/puppy_pug_3_by_weitat.jpg" /> </a> <a href="index.htm"> <img alt="alt..." src="http://th01.deviantart.net/fs12/150/i/2006/287/3/4/puppy_pug_3_by_weitat.jpg" /> </a> <a href="index.htm"> <img alt="alt..." src="http://th01.deviantart.net/fs12/150/i/2006/287/3/4/puppy_pug_3_by_weitat.jpg" /> </a> </div> <div class="grid-row"> <a href="index.htm"> <img alt="alt..." src="http://th01.deviantart.net/fs12/150/i/2006/287/3/4/puppy_pug_3_by_weitat.jpg" /> </a> <a href="index.htm"> <img alt="alt..." src="http://th01.deviantart.net/fs12/150/i/2006/287/3/4/puppy_pug_3_by_weitat.jpg" /> </a> <a href="index.htm"> <img alt="alt..." src="http://th01.deviantart.net/fs12/150/i/2006/287/3/4/puppy_pug_3_by_weitat.jpg" /> </a> </div> <div class="grid-row"> <a href="index.htm"> <img alt="alt..." src="http://th01.deviantart.net/fs12/150/i/2006/287/3/4/puppy_pug_3_by_weitat.jpg" /> </a> <a href="index.htm"> <img alt="alt..." src="http://th01.deviantart.net/fs12/150/i/2006/287/3/4/puppy_pug_3_by_weitat.jpg" /> </a> <a href="index.htm"> <img alt="alt..." src="http://th01.deviantart.net/fs12/150/i/2006/287/3/4/puppy_pug_3_by_weitat.jpg" /> </a> </div> </div> </div> </div> </body> </html> css :
.grid-container { margin-left: auto; margin-right: auto; width: 302px; height: 452px; } .grid-row { width: 302px; height: 150px; margin-bottom: 1px; } .grid-row_last-child { margin-bottom: 0px; } .grid-row { position:relative; float: left; display: block; width: 100px; height: 150px; margin-right: 1px; } .grid-row a:last-child { margin-right: 0px; }
Comments
Post a Comment