添加padding或margin导致三列float布局断裂的问题求助

你的问题核心是float布局中margin不会被box-sizing包含，导致元素总宽度（设置的width + margin）超过父容器宽度，触发换行。下面是针对性的修复方案：

关键修复点 #

• 用calc()计算子元素宽度，把margin从百分比宽度中扣除
• 给父容器添加padding，避免边缘元素的margin导致页面横向滚动
• 补充小屏幕（<767px）的布局规则

修改后的完整代码 #

CSS部分 #

* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -moz-box-sizing: border-box;
  margin: 0;
  padding: 0; /* 重置默认内外边距，避免浏览器差异 */
}

.h1 {
  text-align: center;
  margin: 20px 0; /* 给标题加间距，更美观 */
}

.row {
  padding: 0 10px; /* 抵消子元素的左右margin，防止边缘元素溢出 */
}

.row > div {
  margin: 10px;
}

.itemname {
  float: right;
  background-color: gold;
  margin-top: 0;
  text-align: center;
  font-size: 1.5em;
  border: 1px solid gray;
  height: 30px;
  width: 100px;
}

.desc {
  padding: 20px 10px 20px 10px;
}

@media (min-width: 992px) {
  .item1,
  .item2,
  .item3 {
    float: left;
    width: calc(33.333% - 20px); /* 3等分宽度减去左右各10px的margin */
    border: 1px solid gold;
    background-color: bisque;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .item1,
  .item2 {
    float: left;
    width: calc(50% - 20px); /* 50%宽度减去左右各10px的margin */
    border: 1px solid gold;
    background-color: bisque;
  }
  .item3 {
    float: left;
    width: calc(100% - 20px); /* 100%宽度减去左右各10px的margin */
    border: 1px solid gold;
    background-color: bisque;
  }
}

/* 补充小屏幕布局规则 */
@media (max-width: 767px) {
  .item1,
  .item2,
  .item3 {
    float: left;
    width: calc(100% - 20px);
    border: 1px solid gold;
    background-color: bisque;
  }
}

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

<h1 class="h1">Our Menu</h1>
<div class="row">
  <div class="item1">
    <p class="itemname">Chicken</p>
    <p class="desc">Item Description: Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam deleniti quod asperiores, doloribus expedita quam officia perferendis qui consectetur enim!</p>
  </div>
  <div class="item2">
    <p class="itemname">Beef</p>
    <p class="desc">Item Description: Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam deleniti quod asperiores, doloribus expedita quam officia perferendis qui consectetur enim!</p>
  </div>
  <div class="item3">
    <p class="itemname">Sushi</p>
    <p class="desc">Item Description: Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam deleniti quod asperiores, doloribus expedita quam officia perferendis qui consectetur enim!</p>
  </div>
</div>

修复原理说明 #

1. box-sizing的局限：box-sizing: border-box只能让元素的width包含border和padding，但margin是元素外部间距，不会被计算到width内，所以直接给子元素设百分比宽度+margin，总宽度必然超过父容器。
2. calc()的作用：通过calc(百分比 - margin总和)精确计算子元素可用宽度，确保元素+margin的总宽度刚好是父容器的对应百分比。
3. 父容器padding：给.row加左右10px padding，抵消子元素的左右margin，避免最左侧和最右侧的元素贴紧视口边缘，同时防止页面出现横向滚动条。

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