将扩展文字环绕在图片周围

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

您应该删除myDiv类中的overflow:hidden

Answer 2

问题不仅仅在于文本对齐。 您的问题是将文本包装在DIV中。 此外，浮动自动包装。

我不知道您要做什么的简单方法，但是您可能需要研究http://css-tricks.com/line-clampin/ 。

编辑：这是vivek_nk代码的一种变体，以防万一您需要保留该按钮作为切换按钮以再次折叠内容： http : //jsfiddle.net/tsukasadt/xnd544k1/

这是jQuery切换功能：

$('#myButton').toggle(function () {
    $('.myDiv').css('height','auto');
    $('.myDiv').css('overflow','visible');
}, function () {
    $('.myDiv').css('height','100px');
    $('.myDiv').css('overflow','hidden');
});

我要求您将按钮移到外部DIV内，并替换整个jQuery函数，但是它将按钮留在页面上，作为CSS在隐藏/可见溢出和高度100px / auto之间的切换。

Answer 3

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

   $('#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/