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

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;
}

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

4 个答案: