이 html 요소를 배치하는 방법은 무엇입니까?

나는 아래와 같이 트윗 HTML 소스를 가지고있다. 그것들은 한 줄에 하나씩 있습니다. 브라우저에서는 한 줄씩 한 줄씩 표시합니다. 브라우저에서 원하는 것은 라인 단위가 아니라 레이아웃입니다 : 이미지 abc.jpg가 왼쪽에 있고, 다른 모든 요소는 abc.jpg의 오른쪽에 있고, 요소는 abc의 오른쪽에 있습니다. jpg가 하나씩 차례대로 진행됩니다 (중단하지 않음). 내가 무엇을 명확히 묘사했는지 나는 모른다. 결과는 2 열과 같아야합니다. ldft는 이미지이고, 오른쪽은 트윗 정보입니다. 결과는 우리가 트위터에서 보는 것과 같습니다.이 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

불행히도 선택한 것은 작동하지 않습니다. – samccone

이 html 요소를 배치하는 방법은 무엇입니까?

답변

관련 문제