Question

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

如果向下滑动，文本将在一个块中向下并忽略浮动图像。如果slideDown准备好，则文本会围绕图像。这是通缉行为。

我已经尝试更改溢出：隐藏到溢出-y：隐藏但这不会改变任何东西。同时显示：内联块不起作用。

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();

  });

}）

Answer 1

您的HTML没有按照您的意愿执行，因为div和p是块元素，因此文本不会包含它们。因此，要包装文本，您必须强制p采取行动inline

<强> Demo

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>

Answer 2

这里是脏的解决方法：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);    

})

JQuery向下滑动文本，浮动右图像

2 个答案:

CSS

HTML