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

精華

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

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

標(biāo)簽： 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>