테이블을 사용하지 않고 CSS의 열 만들기/정렬

독특한 디자인 질문이 있습니다. 기본적으로 저는 채팅 스크립트를 작성 중이며 레이아웃을보다 균일하게 만들고 싶습니다. 각 회선에 대해 새 테이블을 만들지 않고 채팅 회선마다 고유 한 열 집합을 가질 수 있습니까? 예를 들어 이것은 제가 이상적으로 찾고있는 디자인입니다.테이블을 사용하지 않고 CSS의 열 만들기/정렬

[TimeStamp] Me: I am writing a long message and this text will be 
        wrapped to the next line. See how the message text 
        is aligned perfectly when wrapped? 
    [TimeStamp] Them: When they write a message that requires wrapping 
         it aligns perfectly for them. 
    [TimeStamp] OtherPeople: I think this makes the concept clear if it 
          needs wrapping it aligns for each "poster"

모든 메시지에 대해 하나의 표를 만들면 특정 열을 원래보다 길게 만들 수 있습니다. 나는 각각의 새로운 게시물에 대해 새로운 테이블을 만드는 것이 이것을 달성 할 수 있다는 것을 알고 있으며, 더 많은 "Web 2.0"CSS 방법이 있는지 궁금해하고 있습니다. 어떤 도움을 주셔서 감사합니다.

출처

2011-12-28 Ed R

표를 사용하는 대신 포스터 이름과 텍스트에 divs를 사용하십시오. 그래서

<div id="everything"><div id="everythingInside"> 
<div id="timestamp">[timestamp]</div> 
<div id="poster">TheCoolGuy</div> 
<div id="comment">I"m cooler than you!</div> 
</div> 
</div>

는 테이블로 표시 CSS를 사용 : 물론

#everything { display: table; } 
#everythingInside { display: table-row; } 
#timestamp, #poster, #comment { display: table-cell; }

이 div의 추가 CSS뿐만 아니라를 사용하는 다른 방법이 있습니다.

출처

2011-12-28 05:46:34

사용 code, pre, (그리고 var, span, div)과 친구. pre 및 code은 공백에 민감한 고정 폭 텍스트를 제공하므로 열이 위와 동일하게 작동합니다 (실제로 소스 또는 요소 검사 만 가능). StackOverflow가 필요한 경우 강조 표시를 수행하려면 Google Prettify을 사용하는 것으로 보입니다.

출처

2011-12-28 05:20:15 sczizzo

'code'와'pre' 만 텍스트에 공백이 있다면 정렬합니까? –

오, 알았어, 나는 단지 당신의 텍스트가 이미 감싸여 있고 공간이 있다고 가정했다. 테이블 밖에서 사용하는 방법을 알지 못했다. 예, 텍스트에는 공백이 필요합니다. 프리젠 테이션을하기 전에 자바 스크립트로 클라이언트의 텍스트를 포맷하거나 선호하는 언어로 서버를 포맷하는 것이 더 쉽습니다. – sczizzo

테이블을 사용하지 않고 CSS의 열 만들기/정렬

답변

관련 문제