如何定位絕對位置後的同級元素？

我正在使用表格來佈置將饋送給電子郵件生成器的某個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>

我希望類「這行」的內容被定位低於「那行」類。目前情況是「這行」位於「行」之上，因爲「行」沒有高度。

任何幫助表示讚賞。謝謝

來源

2017-09-15 Conan Carroll

由於您提供的'this-row'代碼位於'that-row'之下，正如預期的那樣。您的意思是另一件事，或者在您網頁的另一部分存在問題。 –

我不建議重新排序錶行，因爲它可以更改表的默認行爲，並且有更好的方法來處理您正在嘗試完成的操作。

說了這麼多，給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>

來源

2017-09-15 21:42:50

如何定位絕對位置後的同級元素？

回答

相關問題