如何解決這個（看似簡單）的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格式問題？

回答

相關問題