Question

当点击按钮时展开img时，我遇到了包装div的问题。如果没有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

您应该从overflow:hidden类

中删除myDiv

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/

在图像周围包裹扩展文本

3 个答案: