텍스트 정렬이 예상대로 작동하지 않습니다.

컨테이너의 다른면에 두 개의 요소를 만들려고합니다. 내 실제 코드에서이 두 요소는 div의 반대쪽에 있어야하지만, 예를 들어 브라우저 윈도우의 반대쪽에 배치하고 싶다고합시다. 에서텍스트 정렬이 예상대로 작동하지 않습니다.

<html> 
<head> 
</head> 
<body> 
<table> 
<tr> 
<td style="width: 50%;text-align: left;"> 
This should go left 
</td> 
<td style="width: 50%;text-align: right;"> 
This should go right 
</td> 
</tr> 
</table> 
</body> 
</html>

예 :

그래서 나는 간단했다 http://jsbin.com/ocete/

글쎄, 난 div를 아주 잘이 작업을 수행하는 방법을 잘 전적으로 아니에요. 또한 오른쪽 정렬 된 테이블 셀에는 실제 코드에 두 개의 요소가 있습니다. 하나는 이미지이고 하나는 텍스트입니다. 나는 그들이 그들이 포함되어있는 <td>의 반대쪽에 있기를 바랍니다.

원하는 방식으로 어떻게 할 수 있습니까? 나는 어떤 직설적 인 방법도보고 있지 않다. 추가, 당신의 <table> 요소에

출처

2009-12-10 Earlz

테이블에 border = 1을 설정하면 나타납니다. ;-) –

나는 내 대답에 맞게 정렬 된 셀에서 이미지와 텍스트를 어떻게 처리하는지 설명했다. 보세요. –

(고정 위치를 권장하지 마십시오) :

style="width: 100%"

모든 것이 완벽하게 작동하고, 테이블은 단지 그것을 볼 수있을만큼 크지 않다.

출처

2009-12-10 15:48:45 jvenema

예. 나는 바보 같아. 정말로 – Earlz

+1. 그리고 국경을 돌리면 영업 담당자가 무슨 일이 일어나고 있는지 즉시 알게되었습니다. –

또한 'table-layout : fixed'를 설정하면 브라우저에 실제로 의미를 나타내어 셀 폭을 "유용하게"변경하지 않습니다. (이것은 또한 더 빨리 렌더링됩니다.) – bobince

테이블에 지정된 너비가 없으므로 너비가 넓어 지므로 텍스트 정렬을 볼 수 없으므로 아무런 차이가 없습니다.

이

<table style="width: 100%">

을 시도하고 다른 봐.

출처

2009-12-10 15:49:06 nickf

gah, 나는 충분히 빠르지 않았습니다. – Agos

레이아웃 용 테이블을 사용해야하는 이유는 무엇입니까? 대신 div 두 개를 사용하고 너비를 각각 50 %로 설정하고 두 번째는 div을 오른쪽으로 띄우십시오.

출처

2009-12-10 15:50:43

세 번째 셀을 해당 테이블에 추가하십시오. 아주 사소한 권리? 유동적 인 div와는 그렇게 사소하지 않습니다. – Earlz

@earlz : 음, 따라 다릅니다. HTML 코드는 간단합니다. CSS 코드는 * 다소 * 더 복잡합니다 - 단지 div에 적절한 여백을 추가하십시오. 진정한 문제는 컨텐츠의 높이에 상관없이 모든 div를 동일한 높이로 만들고 싶을 때 발생하지만, 순수한 CSS 솔루션도 존재합니다. –

테이블에 폭을 추가 ..

<table style="width: 100%">

편집 : 느린 요오 ...

출처

2009-12-10 15:50:52

당신이 사용할 수있는 테이블의 분리면에 텍스트 옆에 이미지면을 넣어 찾고 있다면 다음 당신에게

----------------------------- 
|text |image | text| 
-----------------------------

같은 것을 받아야

<table style="width: 100%"> 
<tr> 
<td style="text-alight: left;"> 
text 
</td> 
<td style="text-align: right;"> 
    <table style="width: 100%"> 
    <tr> 
     <td style="text-align: left;">image</td> 
     <td style="text-align: right;">text</td> 
    </tr> 
    </table> 
</td> 
</tr> 
</table>

출처

2009-12-10 15:51:49

항상 테이블을 사용하고 있습니까? 그렇다면 위의 대답이 효과가 있습니다. 그러나 컨테이너 div에서 두 div를 사용하는 경우에는 안쪽 div를 각각 왼쪽 및 오른쪽으로 부동시킨 다음 컨테이너 div에서 부동 소수점을 지워야합니다.

출처

2009-12-10 15:52:33 ryanulit

텍스트 정렬이 예상대로 작동하지 않습니다.

답변

관련 문제