如何在块内浮动文本,就像它是内联的?

时间:2015-01-23 16:18:55

标签: javascript css

给定一个图像和一个div,它是一个在另一个div内部的列,它是内容,如何使具有固定宽度的列并且是一个显示块将其文本浮动到图像旁边?

 <img src="https://www.google.com/images/srpr/logo11w.png">
<div id="content">
<div class="column">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est. 
</div>    
</div>

这是代码参考http://codepen.io/anon/pen/rawjLQ

我能想到的最接近的事情是在列中放置一个空div,用js抓取图像的宽度并将其设置为列内的空div,并像在同一容器内的两个元素一样浮动。 ..

是否有一个jquery库来做这样的事情?

1 个答案:

答案 0 :(得分:0)

占位符似乎是最简单的解决方案......

    img{
  float: left;
}
#content{
  position: absolute;
  width: 500px;
}
.column{
  width: 800px;
}
#placeholder{
  width: 550px;
  height: 200px;
  float: left;
}

http://codepen.io/anon/pen/jEwLOd