Question

我有一个图像网格。当有人将鼠标悬停在图像上时，我希望相关文本在图像所在的行下方下拉，并将下一行向下推。

目前，同一行中的其他图像也会下拉。我怎样才能让它们保持静止？

这是我的代码，但您可以在此处看到它：http://jsfiddle.net/VtvG8/

CSS

        #cook-it-raw-container{
            margin: 0px auto; 
            width: 980px; 
            font-family: Dax,Helvetica,Arial,sans-serif; 
            position: relative;
            color: #000;
        }


        #cook-it-raw-container div.sidebar{
            display: inline-block;
            vertical-align: top;
            width: 488px;
        }

        img.chef-pic{
            width: 129px;
            height: 120px;
            display: inline-block;
            margin: 8px;
            cursor: pointer;
        }


        div#sidebar-chefs div.chef-story{
        width: 454px;
        font-size: 13px;
        margin: 10px 0;
        position: relative;
        left: 0;
        display: none;
        }

HTML

        <img class="chef-pic" src="lp_cookitraw_sidebarA_02.jpg" border="0" alt="Albert Adrià" height="118" width="136" />
        <div class="chef-story">
        <h3>Albert Adrià</h3>
        <h4>Tickets, 41°, Barcelona, Spain</h4>
        <p>From working with older brother, Ferran Adrià, at the iconic elBulli restaurant, to maintaining his kingdom of culinary innovation with an ever-expanding empire of new restaurants in Barcelona, Adrià’s bold ideas continue to advance modernist Spanish gastronomy.</p>
        </div>

        <img class="chef-pic" src="lp_cookitraw_sidebarA_14.jpg" border="0" alt="dan barber" height="117" width="135" />
        <div class="chef-story">
        <h3>dan barber</h3>
        <h4>Blue Hill at Stone Barns, New York</h4>
        <p>Chef, writer, educator, and fierce advocate for better choices in sustainable agriculture, Dan Barber is a creative and culinary force in pursuit of nurturing what nurtures us.</p>
        </div>

JQUERY $（文件）。就绪（函数（）{

            $("img.chef-pic").mouseenter(function(){
                        $(this).next(".chef-story").slideToggle();  
                    });
            $("img.chef-pic").mouseleave(function(){
                        $(this).next(".chef-story").slideToggle();  
                    });

        });

我认为绝对位置，但下面的行不会下降;我想下一行也要下推。我搜索了SO和Google，但在这种特殊情况下找不到任何有用的东西。提前感谢您的回复。

Answer 1

使用float：left in

div#sidebar-chefs div.chef-story{}

Jsfiddle http://jsfiddle.net/VtvG8/3/

如何使隐藏的div向下滑动而不影响同一行中的其他元素

1 个答案: