Question

我有如下的推文HTML源代码。它们是逐行的。在浏览器中，它们还将逐行显示一行。我在浏览器中想要的不是逐行而是布局：图像abc.jpg位于左侧，所有其他元素位于abc.jpg的右侧，abc.jpg右侧的元素逐个跟随（不是中断）。我不知道是否清楚地描述了我的意思。结果应该像2列：ldft是图像，右边是推文信息。结果就像我们在twitter上看到的那样。

推文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/home?status=@abc'>Reply</a></div></div>

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

我不知道怎么做。你能救我吗？

Answer 1

这只是一些基本的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（这就是我在这里所做的），因为许多元素可以共享一个类。

Answer 2

这是一个使用您的代码（有一些修复）的工作示例

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

这应该会让你继续前进。

明确：使用浮点数时，两位css都非常重要

ID属性也不应该用于页面上的多个DOM元素，而应该使用类来代替

如何布局这个html元素？

2 个答案: