How to lay out this html element?
I have the tweet HTML source like below. They are line by line. In browser they will also display one line by one line. What I want in browser is not line by line but the layout: the image abc.jpg is on the left, all the other elements are on the right side of the abc.jpg, and elements on the right side of the abc.jpg are followed one by one (not break). I do not know if have describe what I what clearly. The result should be like 2 columns: ldft is images, right is tweet information. The result is like what we see in twitter.
The tweet HTML source is like below:
<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&g开发者_如何学JAVAt; :</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
...
...
I do not know how to do it. Can you help me?
It's just some basic 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);
}
You do know that this won't work properly with that HTML? You have multiple elements with the same id=
attribute. You'll need a class
(which is what I've done here), as many elements can share a class.
here is a working example with your code (with a few fixes)
http://jsfiddle.net/samccone/yZGGU/
this should send you on your way.
the clear:both bit of css is very important when using floats
also the ID attribute is not meant to be used for multiple DOM elements on the page, rather you should use a class instead
精彩评论