У меня есть этот список http://pastebin.me/dde64f8c185de9dd5e429f84701a01ce Каждый раз, когда вы нажимаете на изображение, появляется дополнительное содержимое.Я пробовал несколько методов CSS, но я не могу заставить изображения оставаться на своих местах и текст под ними.У кого-нибудь есть решение?
Хорошо, решено Вот ваш HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Test Page</title> <style type="text/css"> * { margin: 0; padding: 0;} .holder { width:105px;float:left; } img { width: 105px; float:left; } .content { display:none; float:left; } #container { width:350px;margin:auto; } </style> <script type="text/javascript" src="http://www.feetjeans.com/new_fj/nou/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('img').click(function(){ var clasa = $(this).attr("class"); var divul = '#' + clasa; var cssul = $(divul).css('display'); if(cssul == 'none') { $(divul).fadeIn(500); } else $(divul).hide(500); console.log('test'); }); }); </script> </head> <body> <div id="container"> <div class="holder"> <img src="http://img21.imageshack.us/img21/1706/vansf.jpg" class="0" align="left" /> <span class="content" id="0">This is content</span> </div> <div class="holder"> <img src="http://img21.imageshack.us/img21/1706/vansf.jpg" class="1" /> <span class="content" id="1">This is content</span> </div> </div> </body> </html>
UPDATE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Test Page</title> <style type="text/css"> * { margin: 0; padding: 0;} .holder { width:350px;float:left; } img { width: 105px; float:left; } .content { display:none; border: 1px #09f solid; } #container { width:350px;margin:auto; } </style> <script type="text/javascript" src="http://www.feetjeans.com/new_fj/nou/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('img').click(function(){ $(".content").hide("fast"); var clasa = $(this).attr("class"); var divul = '#' + clasa; var cssul = $(divul).css('display'); if(cssul == 'none') { $(divul).fadeIn(500); } else $(divul).hide(500); console.log('test'); }); }); </script> </head> <body> <div id="container"> <div class="holder"> <img src="http://img21.imageshack.us/img21/1706/vansf.jpg" class="0" /> <img src="http://img21.imageshack.us/img21/1706/vansf.jpg" class="1" /> <img src="http://img21.imageshack.us/img21/1706/vansf.jpg" class="2" /> <div style="clear:both;"></div> <div class="content" id="0">This is content</div> <div class="content" id="1">This is content</div> <div class="content" id="2">This is content</div> </div> <div class="holder"> <img src="http://img21.imageshack.us/img21/1706/vansf.jpg" class="3" /> <img src="http://img21.imageshack.us/img21/1706/vansf.jpg" class="4" /> <img src="http://img21.imageshack.us/img21/1706/vansf.jpg" class="5" /> <div style="clear:both;"></div> <div class="content" id="3">This is content</div> <div class="content" id="4">This is content</div> <div class="content" id="5">This is content</div> </div> </div> </body> </html>
Я думаю, что вы собираетесь неправильно отображать контент, посмотрите на этот пример jsFiddle, с которым я работал , просто замените кнопку изображением, которое должно как минимум дать вам нажмите в правильном направлении.
Надеюсь, это поможет.