如何在响应式布局中将横向Table转换为纵向布局？

没问题！要把你当前横向排列的新闻模块改成纵向布局，我给你两种可行方案，一种是调整现有表格结构，另一种是用更适配响应式场景的Flexbox布局，你可以按需选择：

方案一：调整表格结构（保留table标签） #

首先，原HTML里的表格存在标签嵌套不规范的问题（比如td和th混用嵌套），我先帮你修正，再改成纵向排列的结构：

修改后的HTML #

<div class="main">
  <h2>Latest News</h2>
  <style>
    table, th {
      border: 1px solid black;
    }
    table, tr {
      border: 0px;
    }
  </style>
  <table class="latest">
    <tr>
      <!-- 第一条新闻 -->
      <th>
        <a href="">
          <img src="img/NemID_app_to.jpg.png" alt="NemID">
        </a>
      </th>
    </tr>
    <tr>
      <!-- 第二条新闻 -->
      <th>Pic2</th>
    </tr>
    <tr>
      <!-- 第三条新闻 -->
      <th>Pic3</th>
    </tr>
  </table>
</div>

优化后的CSS（含响应式适配） #

body {
  background-color: #596770;
  margin-left: 85px; /* 与侧边栏宽度一致 */
  margin-top: 102.5px;
  font-size: 18px; /* 增大字体方便滚动 */
  padding: 0 52px;
  color:white;
  font-family: montserrat, sans-serif;
}

.latest {
  width: 100%;
  max-width: 423px; /* 保持原有的宽度限制 */
  margin: 0 auto; /* 模块居中显示 */
}

.latest th {
  width: 423px;
  height: 273px;
  display: block; /* 让每个单元格单独占一行 */
  margin-bottom: 10px; /* 增加新闻项之间的间距 */
}

.latest img {
  max-width: 100%;
  height: auto; /* 确保图片自适应容器 */
}

.About {
  margin: -45px 0 0 -52px;
}

/* 左下角文本样式 */
.bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
}

/* 小屏幕适配 */
@media (max-width: 768px) {
  body {
    margin-left: 0;
    padding: 0 20px;
  }
  .latest th {
    width: 100%; /* 铺满屏幕宽度 */
    height: auto; /* 高度自适应内容 */
  }
}

方案二：使用Flexbox布局（推荐，灵活性更高） #

如果想更灵活地控制响应式表现，推荐用div+Flexbox的组合，这种方式比表格更容易调整排列方向，后续扩展也更方便：

修改后的HTML #

<div class="main">
  <h2>Latest News</h2>
  <div class="latest-news-container">
    <!-- 第一条新闻 -->
    <div class="news-item">
      <a href="">
        <img src="img/NemID_app_to.jpg.png" alt="NemID">
      </a>
    </div>
    <!-- 第二条新闻 -->
    <div class="news-item">Pic2</div>
    <!-- 第三条新闻 -->
    <div class="news-item">Pic3</div>
  </div>
</div>

对应的CSS（含响应式适配） #

body {
  background-color: #596770;
  margin-left: 85px; /* 与侧边栏宽度一致 */
  margin-top: 102.5px;
  font-size: 18px; /* 增大字体方便滚动 */
  padding: 0 52px;
  color:white;
  font-family: montserrat, sans-serif;
}

/* 纵向排列的Flex容器 */
.latest-news-container {
  display: flex;
  flex-direction: column; /* 默认纵向排列 */
  gap: 10px; /* 新闻项之间的间距 */
  max-width: 423px;
  margin: 0 auto; /* 模块居中显示 */
}

.news-item {
  width: 100%;
  height: 273px;
  border: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: center; /* 让内容居中显示 */
}

.news-item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover; /* 保持图片比例，填充容器 */
}

.About {
  margin: -45px 0 0 -52px;
}

/* 左下角文本样式 */
.bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
}

/* 小屏幕适配 */
@media (max-width: 768px) {
  body {
    margin-left: 0;
    padding: 0 20px;
  }
  .news-item {
    height: auto;
    min-height: 200px; /* 保持模块最小高度 */
  }
}

两种方案都能实现纵向布局，其中Flexbox方案更适合后续的响应式调整——比如你可以在大屏幕下把flex-direction改成row，让新闻横向排列，小屏幕自动切回纵向，非常灵活。

内容的提问来源于stack exchange，提问作者Jes