1

溢出的文本隐藏在它不会在浮动的右图像周围流动的文本中。

如果您向下滑动，文本将在一个块中向下并忽略浮动图像。如果 slideDown 准备好，则文本将围绕图像。那是想要的行为。

我已经尝试将 overflow:hidden 更改为 overflow-y:hidden 但这并没有改变任何东西。也显示：内联块不起作用。

html:

<div>
<div class="image" style="float:right;">
    <img src="http://lorempixel.com/400/200" />
</div>
<div class="slideDown">slide down</div>
<p style="display:none;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

javascript:

$(function(){

  $(".slideDown").bind('click',function(e){

     $('p').slideToggle();

  });

})

4

2 回答 2

0

这是肮脏的解决方法：http: //jsfiddle.net/Wzh2x/2/ ...

$(function(){

    $.fn.mySlide = function ( speed ) {

        var $self = $(this),
            $p = $self.find('p'),
            h = $p.height(),
            speed = speed || 650;



        $p.css({marginTop: -h});

        $self.find('.slideDown').bind('click',function(e){

            $this_p = $(this).next('p');
            h = h === 0?-$this_p.height():0; 
            $this_p.animate({marginTop: h}, speed);

        });        

        return this;
    };

    $('.test').mySlide(500);    

})
于 2013-07-12T14:12:07.410 回答
0

您的 HTML 没有按照您的意愿进行操作，因为div并且p是块元素，因此文本不会环绕它们。因此，要包装文本，您必须强制p采取行动inline

演示

CSS

div {
    float:left;
}
img {
    float:right;
}
p {
    clear:left;
}
.slideDown {
    float:left;
}

html

<div> <span class="slideDown">slideDown</span>
    <img src="http://lorempixel.com/400/200" />
    <p style="display:none;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
 do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
 aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
 pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia 
deserunt mollit anim id est laborum.</p>
</div>
于 2013-07-12T13:36:30.327 回答