媒体查询下Div布局失效求助：餐厅菜单响应式布局问题

你的响应式布局不生效的核心原因是容器宽度计算未考虑margin和border的影响，同时float布局下的空间分配逻辑有问题，导致容器实际宽度超出父容器，无法按预期排列。

具体问题点 #

1. 未设置box-sizing: border-box：默认情况下，元素的width仅包含内容宽度，border和padding会额外撑开容器，导致实际宽度超过预期。
2. margin:10px直接加在子元素上：当设置width:33.33%时，子元素的实际宽度是33.33% + 20px左右margin，总和超过父容器的100%，强制换行。
3. float布局缺少父容器清除浮动的处理（可选，但会影响父容器高度）。

修复后的完整代码 #

CSS部分

/* 全局重置，统一盒模型 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  /* 使用flex布局替代float，更易实现响应式排列 */
  display: flex;
  flex-wrap: wrap;
  /* 子元素间距，代替margin，避免计算冗余 */
  gap: 10px;
  padding: 10px;
}

.col {
  border: 1px solid black;
  background-color: gray;
  padding: 10px;
}

/* 屏幕宽度≥992px：三列平分 */
@media (min-width: 992px) {
  .col {
    /* flex: 伸缩比例 收缩比例 基础宽度 */
    flex: 1 1 calc(33.33% - 10px);
  }
}

/* 768px≤宽度≤991px：前两列各50%，第三列占满一行 */
@media (min-width:768px) and (max-width:991px) {
  #first, #second {
    flex: 1 1 calc(50% - 10px);
  }
  #third {
    flex: 1 1 100%;
  }
}

/* 宽度<768px：单列排列 */
@media (max-width:767px) {
  .col {
    flex: 1 1 100%;
  }
}

HTML部分（保持原结构即可）

<div class="container">
  <div id="first" class="col">
    <h3>Chicken</h3>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit tortor eget felis porttitor volutpat.
  </div>
  <div id="second" class="col">
    <h3>Beef</h3>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit tortor eget felis porttitor volutpat.
  </div>
  <div id="third" class="col">
    <h3>Sushi</h3>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit tortor eget felis porttitor volutpat.
  </div>
</div>

关键优化说明 #

• 用flex布局替代float：无需手动处理浮动清除，flex-wrap: wrap自动实现换行，gap属性统一控制子元素间距，避免margin带来的计算麻烦。
• box-sizing: border-box：让元素的width包含border和padding，宽度计算更直观。
• calc()函数：精确计算子元素可用宽度，减去gap的空间，确保总宽度不超过父容器。

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