javascript - 在图像周围环绕展开的文本

Question

当 div 在按钮单击时展开时，我在包装 img 时遇到问题。没有 myDiv 的样式，它可以包装。

HTML:

<div>
    <img width='300px' src='http://freefunnydogpictures.com/wp-content/uploads/2014/05/picture_1400053660.jpg'/>
    <div class='myDiv'>Утверждён Перечень сельскохозяйственной продукции, сырья и продовольствия, страной происхождения которых являются Соединенные Штаты Америки, страны Европейского союза,... 
    </div>
</div>
<button id='myButton'>Click</button>

JavaScript:

$(document).ready(function(){
    $('#myButton').click(function(){
        $('.myDiv').height(500);
    });
});

CSS:

img{
    float:left;
}

.myDiv{
    height:100px;
    overflow:hidden;
}

http://jsfiddle.net/pfodox/z05cwh5g/ .

Answer 1

如下更改按钮的点击功能。

   $('#myButton').click(function(){
      $('.myDiv').css('height','auto'); 
      // The above line will increase the height of div automatically 
      //and avoids overlapping with other elements
      $('#myButton').css('display','none');
      $('.myDiv').css('overflow','visible');
   });

不是更改硬编码的高度，而是更改“溢出”属性。因为如果文本需要环绕图像，您必须重置它。将其设置为“可见”或“继承”。 - http://jsfiddle.net/vivek_nk/z05cwh5g/3/