浮动图像位于左侧左侧,右侧文本从图像的左上角到左下角包裹

时间:2015-11-11 22:31:58

标签: jquery html css

我正在尝试创建一个左侧浮动,右侧文本从浮动图像的左上角到左下角包裹。

我正在寻找的结果是这样的:

some text some text some text 
some text some text some text 
some text some text some text 
          some text some text 
Image     some text some text 
          some text some text 
some text some text some text 
some text some text some text 
some text some text some text 

但我实际得到的是:

          some text some text 
          some text some text 
          some text some text 
          some text some text 
Image     some text some text 
          some text some text 
some text some text some text 
some text some text some text 
some text some text some text 

如您所见,图像上方有一个空格,如果我使用边距或填充,则无关紧要。

那么我怎样才能达到我需要的效果呢?我目前正在使用CSS。 jQuery能做到这一点吗?

https://jsfiddle.net/pta0g6r5/2/

<style>

.floatimage {           
  float: left;
  padding-right: 10px;
  margin-top: 150px;
}

</style>

<p class="floatimage">  <img src="http://i01.i.aliimg.com/wsphoto/v0/927196633_1/Mulheres-Retro-Rivet-no-colarinho-branco-Feminina-Silm-manga-comprida-Pockets-OL-blusa-cs82.jpg_50x50.jpg" /></p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas condimentum, metus semper malesuada ultricies, risus arcu convallis quam, ut pulvinar orci augue et sem. Sed a orci cursus, fringilla tortor eu, eleifend massa. Aenean elementum augue non sodales hendrerit. Fusce ut nunc luctus, bibendum ex sed, sodales elit. Fusce dictum, nunc egestas bibendum dictum, lorem nisl aliquam purus, non ullamcorper magna dui ut justo. Curabitur at porta sem. Donec vestibulum nec justo ut tempor.

Aenean in neque sagittis, auctor est vel, congue purus. Pellentesque porttitor dui id ligula facilisis sollicitudin. Sed finibus maximus convallis. Nullam eget rutrum diam, at tempus elit. Pellentesque tempor eleifend tortor interdum fringilla. Donec mollis in nisl sed dignissim. Nunc eu magna eu risus laoreet dapibus sit amet nec metus. Maecenas a nisl et lacus sollicitudin maximus at nec ex. Morbi porttitor urna eget ipsum malesuada, a posuere quam faucibus. Morbi quis felis quam. Fusce vulputate ornare sapien, quis aliquam risus commodo at. In pharetra imperdiet turpis a sodales. Praesent congue, erat vitae ullamcorper malesuada, tortor mi ultrices leo, malesuada elementum tortor libero sit amet eros. Vivamus nec massa hendrerit, porttitor lorem et, mollis libero. Donec eget rutrum nibh. Morbi in ligula sit amet ligula imperdiet blandit non sit amet arcu.

Quisque pharetra lacinia libero, non pulvinar elit sodales nec. Nullam feugiat orci et ante vulputate dapibus. Suspendisse porta justo in mi sollicitudin, in cursus odio vestibulum. Phasellus vitae euismod diam, id placerat ipsum. Ut porta, magna ac cursus ullamcorper, justo erat tristique dui, tincidunt iaculis augue justo quis ex. Sed et egestas lacus. Maecenas leo quam, auctor ut erat ac, bibendum dignissim nisl. Nullam consequat blandit semper. Aliquam erat volutpat. Pellentesque laoreet aliquam mauris vel volutpat. Nulla tristique pellentesque faucibus. In posuere neque a justo tempus dignissim. Praesent pellentesque augue consequat, commodo nunc aliquet, porttitor neque.

Nulla posuere volutpat varius. Duis ultricies libero et urna aliquam tincidunt. Nam et egestas lectus. Nunc et aliquet tortor. Integer tincidunt fringilla congue. Ut quis mauris ipsum. Sed vel ante justo. Interdum et malesuada fames ac ante ipsum primis in faucibus.

0 个答案:

没有答案