위치 절대 값 다음에 형제 요소를 배치하는 방법은 무엇입니까?

Question

나는 전자 메일 생성기에 공급할 특정 html 파일을 레이아웃하기 위해 테이블을 사용하고 있습니다.

<table> 
 
    <tbody> 
 
    <tr class="that-row"> 
 
     <td style="font-size: 0;background: #fff; position: relative;" align="center"> 
 
     <img src="img_url" style="width:100%;margin: 0 0 20px;position: absolute;top: 0;left: 0; height: 100%; min-height: 100%;"> 
 
     <span style="width: 100%;line-height: 34px;font-family: Arial Regular, sans-serif;font-size: 22px;color: #474747;margin: 10px 0 0 0;"> 
 
     Lorem IpsumW 
 
     </span> 
 
     </td> 
 
    </tr> 
 
    <tr class="this-row"> 
 
     <td style="padding: 0 25px;font-size: 28px;line-height: 37px;color: #474747;text-align: center; position: relative;" align="center"> 
 
     <span style="display: block;text-align: center;color: #474747;font-size: 34px;font-weight: bold;font-family: Arial; margin: 0 0 21px;">LOREM IPSUM</span> 
 
     <span style="text-align: left;margin: 0 auto;display: block;width: 83%;">lorem ipsum 123456</span> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

나는 클래스 "이 행"의 내용이 "그 행"클래스 아래에 위치되어야합니다. 현재 상황은 "그 행"이 높이가 없기 때문에 "이 행"의 내용이 "그 행"위에 위치합니다.

도움을 주시면 감사하겠습니다. 감사합니다.

Answer 1

테이블 행의 순서를 바꿀 수 있으므로 테이블 행을 다시 정렬하는 것이 좋으며 수행하려는 작업을 처리하는 더 좋은 방법이 있으므로이 행을 다시 정렬하지 않는 것이 좋습니다.

그렇다면 flexbox를 사용해보십시오. (테스트되지 않음)

<table> 
    <tbody style="display:flex; flex-direction:column;"> 
    <tr style="order:2;"> 
     <td>1</td> 
    </tr> 
    <tr style="order:1;"> 
     <td>2</td> 
    </tr> 
    </tbody> 
</table>