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

Question

使用 CSS，什么是最干净、最简单的格式化左侧图标和右侧文本的框的方法:

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

到目前为止，我使用了 <div class=icon”>和 div.icon { float: left; }将图标放在文本左侧，但“和一些更多文本”向左流动(在图标下方)，而不是停留在漂亮的实心列中。

P.S.:我不想使用表格。

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 */
}