HTML+CSS如何實現(xiàn)文字環(huán)繞的效果

精華

鵬魚燕 2016-10-24 11:51:27 瀏覽(11186) 回復(6) 贊(0)

界面需求需要用HTML+CSS實現(xiàn)類似word中文字環(huán)繞的效果，求給點靈感，傳授下實現(xiàn)的思路。 ![](http://hgci.cn:/attachments/image/20161024/1477281071291558.png) 類似上圖這種效果！

標簽： html html5 css css3

回答(6)

陳 2016-10-24

<div style="float:left;">
  <div style="float:left;height:100px;width:1px;"></div>
  <div style="float:right;height:250px;width:250px;
  clear:left;background:#F00;margin:5px 5px 5px 0;">
  </div>
  <p>新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容
  新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容
  新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容
  新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容
  新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容
  新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容
  新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容
  新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容
  新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容
  新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容
  新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容
  新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容
  新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容
  新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容
  新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容
  新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容
  新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容
  新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容
  新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容
  新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容
  新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容
  新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容
  新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容
</p>
</div>