在图像周围环绕相对位置的div

Question

<table style="width: 100%; table-layout: fixed; margin-top: 100px;">
<tr>
<td align="center">
bla
</td>
<td align="center">
<div id="thisone" style="display: flex; position: relative; background-color: blue;">

<div style="position: absolute; height: 20px; width: 100%; margin-top: -30px; display: flex; flex-direction: row; justify-content: space-between; background-color: red;">
up
</div>

<div style="position: absolute; height: 100%; width: 20px; margin-left: -30px; display: flex; flex-direction: column; justify-content: space-between; background-color: red;">
left
</div>
<img src="https://i.imgur.com/1T1iFeN.jpg" style="max-width: 100%; max-height: 100vh;">
</div>                  
</td>
<td align="center">
bla
</td>           
</tr>
</table>

如何使divthisone环绕图像?我也会接受relative的替代品，只要up内部的div在图像上方并且具有相同的宽度，left留在图像并且具有相同的高度。

Answer 1

我通过在相对div:

周围添加inline-block来解决这个问题

<table style="width: 100%; table-layout: fixed; margin-top: 100px;">
<tr>
<td align="center">
bla
</td>
<td align="center">
<div style="display: inline-block;">
<div  style="display: flex; position: relative; background-color: blue;">

<div style="position: absolute; height: 20px; width: 100%; margin-top: -30px; display: flex; flex-direction: row; justify-content: space-between; background-color: red;">
up
</div>

<div style="position: absolute; height: 100%; width: 20px; margin-left: -30px; display: flex; flex-direction: column; justify-content: space-between; background-color: red;">
left
</div>
<img src="https://i.imgur.com/1T1iFeN.jpg" style="max-width: 100%; max-height: 100vh;">
</div>  
</div>
</td>
<td align="center">
bla
</td>           
</tr>
</table>