我有这个列表
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>
更新
<!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>
关于jquery - 固定图片位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3036166/