如何在调整浏览器窗口大小时防止表格和图像元素移动[REPOST](How to prevent the table and image elements from moving when resizing browser window [REPOST])

 我之前发布了一个问题并对其进行了编辑，但编辑后的版本并未显示正确的代码，因此我正在重新发布它。 当我调整我的浏览器窗口大小时，图像似乎走出了“框”或它的容器。 我是编码方面的初学者，我知道如果我使用div而不是table，但是这是为了实践目的（而且我需要它用于学校项目，我想这就是我想如何使用表格元素）。 无论如何，请帮我弄清楚该怎么做/如何修复代码。 
 
 编辑：当我调整大小时看起来像这样 。 
 
 
 
 
 
  
.post {
  padding: 3em 3em 1em 3em;
  background: #ffffff;
  border: solid 1px rgba(160, 160, 160, 0.3);
  margin: 0 0 3em 0;
  position: relative;
}

.post>header {
  display: flex;
  border-bottom: solid 1px rgba(160, 160, 160, 0.3);
  left: -3em;
  margin: -3em 0 3em 0;
  position: relative;
  width: calc(100% + 6em);
}

.post>header .title {
  flex-grow: 1;
  flex: 1;
  padding: 3.75em 3em 3.3em 3em;
}

.post>header .title h2 {
  font-weight: 900;
  font-size: 1.5em;
  text-align: center;
}

.post>header .title> :last-child {
  margin-bottom: 0;
}

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

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

td {
  padding: 10px;
}

.group {
  margin-left: auto;
  margin-right: auto;
}
 
  
<article class="post">
  <header>
    <div class="title">
      <h2><a href="#">Favorite Books</a></h2>
    </div>
  </header>


  <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>
  
 </article>
 
 
 
 

I previously posted a question and edited it but the edited version does not show the correct code so I'm reposting it. When I resize my browser window, the images seem to go out of the "box" or it's container. I'm a beginner at coding and I know it's much better if I use div instead of table, but this is for practice purposes (and also, I need it for a school project and I figured that's how I want to use the table element). Anyways, please help me figure out what to do/ how to fix the code.
 
EDIT: Looks like this when I resize.
 
 
 
 
 
  
.post {
  padding: 3em 3em 1em 3em;
  background: #ffffff;
  border: solid 1px rgba(160, 160, 160, 0.3);
  margin: 0 0 3em 0;
  position: relative;
}

.post>header {
  display: flex;
  border-bottom: solid 1px rgba(160, 160, 160, 0.3);
  left: -3em;
  margin: -3em 0 3em 0;
  position: relative;
  width: calc(100% + 6em);
}

.post>header .title {
  flex-grow: 1;
  flex: 1;
  padding: 3.75em 3em 3.3em 3em;
}

.post>header .title h2 {
  font-weight: 900;
  font-size: 1.5em;
  text-align: center;
}

.post>header .title> :last-child {
  margin-bottom: 0;
}

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

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

td {
  padding: 10px;
}

.group {
  margin-left: auto;
  margin-right: auto;
}
 
  
<article class="post">
  <header>
    <div class="title">
      <h2><a href="#">Favorite Books</a></h2>
    </div>
  </header>


  <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>
  
 </article>
 
 
 
 

原文：https://stackoverflow.com/questions/42929745