正確使用CSS

我使用CSS希望的格式的HTML如何浮動圖片和文字，使我得到如下：左側正確使用CSS

形象，主題和身體旁邊的權利。我想受限於一條線，而主體位於另一條線上。通過一個接一個的消息 onsendsnt塊下降頁面。

但是，我得到的主題和身體一行，並在頁面的cacade效應。

這是我似乎越來越。

alt text 我似乎無法得到所需的東西。

我的HTML是：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>messages to/from someone</title> 
<link rel="stylesheet" type="text/css" href="messages.css" /> 
</head><body> 
     <div class'message'> 
       <span class='to'> 
        <img class='floatimgleft' src='../code/images/arrow-right.png' width='64' height='64' border='0' /> 
        <span class='subject'>subject</span> 
        <span class='body'>body</span> 
       </span> 
     </div> 
     <div class'message'> 
       <span class='to'> 
        <img class='floatimgleft' src='../code/images/arrow-right.png' width='64' height='64' border='0' /> 
        <span class='subject'>subject</span> 
        <span class='body'>body</span> 
       </span> 
     </div> 
     <div class'message'> 
       <span class='to'> 
        <img class='floatimgleft' src='../code/images/arrow-right.png' width='64' height='64' border='0' /> 
        <span class='subject'>subject</span> 
        <span class='body'>body</span> 
       </span> 
     </div> 
</body></html>

我的CSS是：

.floatimgleft { 
    float:left; 
    margin-top:10px; 
    margin-right:10px; 
    margin-bottom:10px; 
} 
.message{ 
    display: block; 
} 

.subject { 
    display: inline; 
} 
.body { 
    display: inline; 
}

編輯：我編輯的代碼，以顯示我來自哪裏開始。我的印象是div class ='message'會導致消息之間出現換行符，但是我得到了級聯效果。

來源

2010-12-05 Preet Sangha

有幾個選項可以結束浮動。比如用css規則添加一個br或div：clear：both;它下面的圖像和文字。然而，並非所有的瀏覽器都會以正確的方式處理它（ahum ahum IE）。如果你真的需要結束浮動，我的經驗是圍繞圖像和文本添加一個div設置爲它的CSS：縮放：1;溢出：自動;在這種情況下，您的最佳選擇 – PeeHaa 2010-12-05 03:09:04

這可能是一個非常愚蠢的答案，但我沒有看到在您的HTML中使用的* floatimgleft * CSS類。 – 2010-12-05 02:49:53

地址：

class="floatimgleft"

您img標籤：

<img src='../code/images/arrow-right.png' width='64' height='64' border='0' class="floatimgleft" />

而且，似乎沒有使用to類要麼和你缺少在<div class'message'>=。

這裏有一個的jsfiddle對其進行測試：

http://jsfiddle.net/CdBSU/

編輯：對於有明確，加clear: left到消息。對於示範

http://jsfiddle.net/CdBSU/2/

：見小提琴。

來源

2010-12-05 02:54:28

我已更新該問題。 – 2010-12-05 03:05:33

對於你要找的佈局，我可能會用更多的東西，比如去：

的Index.html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>messages to/from someone</title> 
    <link rel="stylesheet" type="text/css" href="style.css" /> 
</head> 
<body> 
    <ul id="messages"> 
     <li> 
      <div> 
       <span class="icon"></span> 
       <h2>Subject</h2> 
       <p>Body.. Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p> 
      </div> 
     </li> 
     <li> 
      <div> 
       <span class="icon"></span> 
       <h2>Subject</h2> 
       <p>Body.. Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p> 
      </div> 
     </li> 
    </ul> 
</body> 
</html>

的style.css：

h2, p { clear: none; padding: 0px; margin: 0px; } 
ul#messages { text-align: left; } 
ul#messages li { margin-bottom: 25px; } 
ul#messages li > div > span.icon { float: left; display: block; width: 64px; height: 64px; border: 1px solid #111; /* border added to demonstrate */ background-image: url('../code/images/arrow-right.png'); }

在證明： http://jsfiddle.net/j7KHg/2/

來源

2010-12-05 02:57:13

正確使用CSS

回答

相關問題