css - 使 <li> 在图片周围保持一致

Question

左边有一张图片，还有几个段落和一个 <ul>有几个<li>在右边。我的<li>环绕图像。如何制作 <li>过去的图像是一致的。

这里有一张图片来阐明我的意思:

Answer 1

如果你的代码有点相似<img style="float"> <ul> : 然后你有几种方法可以将 float 元素放在一边 :)

img, #floatleft {float:left;}
#displaytable {display:table;}
#overflowhidden {overflow:hidden;}
#displayinlineblock {display:inline-block;}
ul:before {content:'My id is:'attr(id)' . Do i behave allright ?';color:red;display:list-item;}

    <img src="http://lorempixel.com/50/50" alt="i float"/>
    <ul id="overflowhidden">
      <li> li lorem blablaum</li>
      <li> li lorem blablaum</li>
      <li> li lorem blablaum</li>
      <li> li lorem blablaum</li>
      <li> li lorem blablaum</li>
      <li> li lorem blablaum</li>
    </ul>
<hr/>
    <img src="http://lorempixel.com/50/50" alt="i float"/>
    <ul id="displaytable">
      <li> li lorem blablaum</li>
      <li> li lorem blablaum</li>
      <li> li lorem blablaum</li>
      <li> li lorem blablaum</li>
      <li> li lorem blablaum</li>
      <li> li lorem blablaum</li>
    </ul>
<hr/>
    <img src="http://lorempixel.com/50/50" alt="i float"/>
<ul id="displayinlineblock">
      <li> li lorem blablaum</li>
      <li> li lorem blablaum</li>
      <li> li lorem blablaum</li>
      <li> li lorem blablaum</li>
      <li> li lorem blablaum</li>
      <li> li lorem blablaum</li>
    </ul>
<hr/>
    <img src="http://lorempixel.com/50/50" alt="i float"/>
    <ul id="floatleft">    
      <li> li lorem blablaum</li>
      <li> li lorem blablaum</li>
      <li> li lorem blablaum</li>
      <li> li lorem blablaum</li>
      <li> li lorem blablaum</li>
      <li> li lorem blablaum</li>
    </ul>

你可以看看:http://www.quirksmode.org/blog/archives/2005/03/clearing_floats.html开始了解处理 float 的方法