i have following code...
<!doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>flickr</title> <meta name="viewport" content="width=device-width, initial-scale=1"/> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/> <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#photoform').submit(function () { var keyword = $('#keyword').val(); $('#photolist').html('please wait...'); $.getjson('http://api.flickr.com/services/feeds/photos_public.gne?tags=' + keyword + '&format=json&jsoncallback=?', function (data) { $('#photolist').empty(); $.each(data.items, function (index, item) { $('#photolist').append('<li><img src="' + item.media.m + '" align="left"/></li><br />'); }); } ); return false; }); }); </script> <style type="text/css"> #photos { margin-top: 20px; } #photos img { height: 200px; width: 250px; margin-right: 10px; margin-bottom: 10px; } </style> </head> <body> <div data-role="page" id="photos"> <form method="get" name="photoform" id="photoform"> keyword: <input type="text" name="keyword" id="keyword" value="" /><input type="submit" name="findphoto" id="findphoto" value="find" /> <ul data-role="listview" data-filter="false" id="photolist"></ul> </form> </div> </body> </html> i want display flickr api photos 1 column using the
<ul><li></li></ul> tags. refer $.getjson in code example. when run it, doesn't spit out photos in 1 column. spits them out in 5 columns. suggestions?
i'm looking @ part of code here:
$('#photolist').append('<li><img src="' + item.media.m + '" align="left"/></li><br />'); this suggests images shown 1 on top of other. if case , not happy that, should suggest want images next each other in 1 line.
if true should change line above 1 below:
$('#photolist').append('<li><img src="' + item.media.m + '" align="left"/></li>'); also add following in stylesheet declarations:
ul#photolist li{ width: 20%; display: inline-block; } 