如何使隱藏的div向下滑動而不影響同一行中的其他元素

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 $ {document）.ready（function（）{

            $("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/