如何让模拟表格布局的5列在移动端垂直堆叠？

你之前尝试给.content设置100%宽度无效，核心原因是**display: table-cell元素受父级table布局约束，无法通过宽度设置实现换行**。要让列在移动端垂直堆叠，需要修改父容器和子元素的布局属性，具体方案如下：

修正后的完整代码 #

CSS 代码 #

#container {
  display: table;
  width: 100%;
  table-layout: fixed;
  padding: 10px;
}

.content {
  display: table-cell;
  text-align: center;
  border: 5px solid black;
  word-wrap: break-word;
}

.content img {
  width: 100%;
  height: 100%;
  /* 移除错误的display属性：table-header-group不适用于图片，会导致布局异常 */
}

/* 媒体查询：适配移动端（可根据需求调整断点宽度） */
@media (max-width: 768px) {
  #container {
    display: block; /* 将表格布局改为块级布局 */
    padding: 10px 0; /* 可选：调整内边距避免堆叠后左右留白过大 */
  }
  
  .content {
    display: block; /* 将表格单元格改为块级元素 */
    width: 100%; /* 占满父容器宽度 */
    margin-bottom: 10px; /* 可选：给列之间添加垂直间距 */
  }
  
  /* 移除最后一列的底部间距 */
  .content:last-child {
    margin-bottom: 0;
  }
}

HTML 代码 #

<div id="container">
  <div class="content">内容1</div>
  <div class="content">内容2</div>
  <div class="content">内容3</div>
  <div class="content">内容4</div>
  <div class="content">内容5</div>
</div>

关键要点说明 #

• 父容器#container在移动端切换为display: block，解除表格布局的约束，让子元素可以自由排列。
• 子元素.content切换为display: block后，会自动变为垂直排列的块级元素，配合width: 100%实现全屏宽度。
• 原代码中.content img的display: table-header-group是错误用法，会干扰图片正常布局，必须移除。

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