如何在 CSS 中解决这个（看似简单的）格式问题？

Question

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

[图标]文字文字文字 [____] 和更多文字 还有一些文字

到目前为止，我使用<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 */
}

Answer 2

将文本包装在 div 中怎么样？

Answer 3

这应该可行：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>1</title>
        <style>
            .announce img {
                float:left;
                margin:0 10px 10px 0;
                }
            .announce p {
                overflow:hidden;
                }
        </style>
    </head>
    <body>
        <div class="announce">
            <img src="http://www.google.ru/images/logos/ps_logo2.png" alt="" />
            <p>Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here.</p>
        </div>
   </body>
</html>

在线查询：http://jsfiddle.net/FVgg6/

Answer 4

假设你有类似的东西

<div class="icon">this is the icon</div>
<div class="main">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>

然后你可以将主div的左边距设置为你的图标的宽度，这会给你一个很好的列效果。

.main
{
    margin-left:100px;
}