如何佈置此html元素？

我有如下的推文HTML源代碼。他們是一行一行的。在瀏覽器中，它們也將顯示一行一行。我在瀏覽器中想要的不是一行一行，而是佈局：圖片abc.jpg位於左側，所有其他元素位於abc.jpg的右側，元素位於abc的右側。 jpg一個接一個（不是中斷）。我不知道是否描述了我清楚的內容。結果應該是2列：ldft是圖像，右是推文信息。結果就像我們在twitter上看到的一樣。如何佈置此html元素？

的鳴叫HTML源代碼是象下面這樣：

<div id="tweet"> // first tweet 
<a href='http://twitter.com/abc'><img src='http://a3.twimg.com/profile_images/965532155/abc.jpg'></a> 
<div id='tweetUser'><a href="http://twitter.com/abc/statuses/7021860487168000" onmousedown='return touch(this.href,0)'>abc</a> :</div> 
<div id='tweetText'>this is the content. <a onmousedown="return touch(this.href,0)" href="http://fb.me/MWgZzSzx">http://fb.me/MWgZzSzx</a></div> 
<div id='tweetTime'>2010-11-23 04:45:20</div> 
<div id='tweetReply'> <a onmousedown='return touch(this.href,0)' target='replies' style='color:#0A0;' href='http://twitter.com/[email protected]'>Reply</a></div></div> 

<div id="tweet"> // second tweet 
... 
...

我不知道該怎麼做。你可以幫我嗎？

來源

2011-04-23 Dylan

這只是一些基本的CSS：http://jsfiddle.net/9GNxT/11/

CSS：

.tweet { 
    background-color: rgb(200, 200, 255); 

    width: 300px; 
    height: 100px; 
} 

.tweet img { 
    float: left; 

    width: 100px; 
    height: 100%; 

    background-color: rgb(200, 255, 200); 
}

你做知道這會不會與HTML正常工作？您有多個元素與相同的id=屬性。你需要一個class（這是我在這裏完成的），因爲許多元素可以共享一個類。

來源

2011-04-23 05:21:32 Blender

這裏是你的代碼的工作示例（少數修復）

http://jsfiddle.net/samccone/yZGGU/

這應該給你對你的方式。

明確：使用花車

也並不意味着ID屬性用於在頁面上的多個DOM元素時CSS的兩個位是非常重要的，而不是你應該使用一個類來代替

來源

2011-04-23 05:32:38 samccone

謝謝你這麼多。你的鏈接非常好。你的答案也應該是答案。但我只能選一次。 – Dylan 2011-04-23 14:24:05

不幸的是，你選擇的那個不起作用 – samccone 2011-04-23 17:44:14

如何佈置此html元素？

回答

相關問題