Fix position of image
I have this list
http://pastebin.me/dde64f8c185de9dd5e429f84701a01ce Anytime you click on an image extra content appears .开发者_运维百科 I have tryed several css methods but i cant get the images to remain in their position and get the text to go underneath . Anyone has a solution ?Ok, Solved Here is your 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>
I think you're going about displaying the content the wrong way, check out this jsFiddle example I've been working with, just replace the button with your image, that should at least give you a push in the right direction.
Hope it helps.
加载中,请稍侯......
精彩评论