如何在CSS中解决这个(看似简单的)格式化问题？

Question

使用CSS,格式化左侧带有图标和右侧文本的框的最简洁,最简单的方法是什么:

  [Icon]   Text text text
  [____]   and more text
           and some more text

到目前为止,我已经使用<div class=icon”>并div.icon { float: left; }放置了文本左侧的图标,但"还有一些文本"流向左侧(图标下方)而不是留在一个漂亮的实心列中.

PS:我不想使用表格.

Answer 1

为什么不将图标用作背景图像？

HTML

<div class="withIcon">text text text text text text</div>

CSS

.withIcon {
 background-image: url(youricon.png);
 background-position: top left;
 padding-left: 20px; /* width of your icon */
}