div 안에있는 표 : div와 표의 텍스트를 수직으로 정렬하는 방법

Question

이 예제에서는 두 개의 텍스트 블록이 왼쪽에서 수직으로 정렬되어 있지만 많은 연구와 많은 시도 후에 정렬하는 방법을 찾을 수 없습니다 양측 모두 :

<div style="text-align: justify; padding: 10px;">some wrapped (long enough) text 
    <table style="margin-left: -7px; width: 100%; border: 3px solid red"> 
     <tr><td>some wrapped (long enough) text</td></tr> 
    </table> 
</div> 

이것은 단순한 예일뿐입니다. 테이블에는 사실 여러 개의 raws 컬럼이 포함되어 있습니다. 수직 정렬은 div의 텍스트를 한 손으로, 테이블의 텍스트를 다른 것과 관련시킵니다.

질문에 대한 답을 다시 말하자면, div에 표를 크기를 조정하여 브라우저에 상대적으로 100 %의 값을 가질 수 있고 컨테이너 div의 여백과 패딩과는 독립적으로 할 수 있습니까?

width : (100 % + 7px)와 같은 것을 추가하면 좋을 것입니다.

마지막으로 필자는 얇은 테두리 (1 픽셀), 여백 및 패딩 (%) 및 계산 된 너비 (%) (100)를 얻었습니다.

Answer 1

해결책은 float:left과 float:right입니다. 귀하의 경우, 2 개 div를 사용하면 필요한 것을 얻을 수 있습니다. 확인 demo

<div style="text-align: justify; padding: 10px;"> 
    <div style="float:left">some wrapped (long enough) text</div> 
    <div style="float:right">some wrapped (long enough) text</div> 
</div> 

여전히 테이블을 사용하고 싶다면. 그것은 수도 있습니다,하지만 난 여기에 테이블을 사용하는 포인팅이 표시되지 않는

<div style="text-align: justify; padding: 10px;"> 
     <div style="float:left">some wrapped (long enough) text</div> 
     <table style="float:right;margin-left: -7px; border: 3px solid red"> 
     <tr><td>some wrapped (long enough) text</td></tr> 
    </table> 
</div> 

확인 demo

당신은 그냥이 같은 테이블을 사용하지 않는, FLOAT을 사용할 수 있습니다

Answer 2

:

<div style="text-align: justify; padding: 10px;"> 
    <div style="float:left">text text text text</div> 
    <div style="float:left">text text text text</div> 
</div> 

또는 두 번째 것은 "float : right"입니다.

가 할 것을 잊지 마십시오 : 결국

<div style="clear:both"></div> 

를 (필요한 경우).

N.B : 필요하지 않으면 테이블을 사용하지 마십시오 (예를 들어 통계 테이블).