Question

我有这个清单
http://pastebin.me/dde64f8c185de9dd5e429f84701a01ce
无论何时单击图像，都会显示额外内容。我已经尝试了几种css方法，但我不能让图像保持在他们的位置并让文本在下面。有人有解决方案吗？

Answer 1

好的，解决了这里是你的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>

Answer 2

我认为你要以错误的方式显示内容，check out this jsFiddle example I've been working with，只需用你的图片替换按钮，这至少应该让你朝着正确的方向前进。

希望它有所帮助。

修复图像的位置

2 个答案: