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

Question

我是编码初学者，所以我不知道如何修复代码。我尝试查找解决方案，但仅出现 div 元素。我确实尝试过，但仍然无法修复。

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

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


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>

Answer 1

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

请记住，这不会使您的网站在某些设备上响应。

.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>