如何在调整浏览器窗口大小时防止表格和图像元素移动

Question

我是编码的初学者，所以我不知道如何修复代码。我尝试查找解决方案，但只显示div元素。我确实尝试了它们但仍然无法修复它。

＆＃13;

＆＃13;

.image {
    width: 200px;
    height: 260px;
}

table {
    margin-left: auto;
    margin-right: auto;
}


td {
    padding: 10px;
}

.group {
    margin-left: auto;
    margin-right: auto;
}

＆＃13;

<table>
  <tr>
    <td><a href="#" target="_blank"><img src= "#" alt="#" class="image" /> </a></td>
    <td><a href="#" target="_blank"><img src= "#" alt="#" class="image" /> </a></td>
    <td><a href="# target="_blank"><img src= "#" alt="#" class="image" /> </a></td>
  </tr>
                              
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您需要向width添加.table。这将为它提供一个可以使用的精确宽度。

请注意，这不会使您的网站在某些设备上做出响应。

.image {
    width: 200px;
    height: 260px;
}

table {
    margin-left: auto;
    margin-right: auto;
    width: 650px;
}


td {
    padding: 10px;
}

.group {
    margin-left: auto;
    margin-right: auto;
}

<table>
  <tr>
    <td><a href="#" target="_blank"><img src= "#" alt="#" class="image" /> </a></td>
    <td><a href="#" target="_blank"><img src= "#" alt="#" class="image" /> </a></td>
    <td><a href="# target="_blank"><img src= "#" alt="#" class="image" /> </a></td>
  </tr>
                              
</table>