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

使用CSS，什么是格式化在左侧和文本右边的图标箱清洁，最简单的方法：如何解决这个（看似简单）的CSS格式问题？

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

到目前为止，我已经使用<div class=icon”>和div.icon { float: left; }放置图标文本左边，但“和一些更多的文字”左边（图标下面）流动，而不是留在一个很好，坚实的专栏。

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

来源

2010-12-15 Tony the Pony

为什么不使用图标作为背景图片？

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

来源

2010-12-15 07:45:57 Bazzz

背景图像是最好的技术。 – 2010-12-15 07:52:55

完美 - 干净和简单 – 2010-12-15 07:57:58

有没有办法将图标偏移一定数量的像素，还是我需要将div包装到另一个div中？ – 2010-12-15 08:01:48

怎么样在一个div包裹的文本？

来源

2010-12-15 07:45:58

这应该工作：

<!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/

来源

2010-12-15 07:55:57 Flack

假设你有类似

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

来源

2010-12-15 07:57:31

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

回答

相关问题