如何为Div添加Margin且不换行？断点处列对齐问题求助

给div添加margin时会导致元素换行，调整媒体查询后，在特定断点（平板/桌面）右侧列无法对齐。因Coursera作业限制，只能使用媒体查询（media queries）+ 浮动（float）+ 外边距（margins），不能使用Flexbox或Grid布局。

原代码 #

CSS代码 #

{
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
}

h1 {
    text-align: center;
    font-family: Arial;
}

p {
    margin-top: -18px;
}

p.meat {
   float: right;
   top: 0;
   width: 100px;
   padding: 5px;
   margin: -32px -3px 0px;
   border: 3px solid black;
   text-align: center;
   font-size: 125%;
   font-weight: bold;
   background-color: #FFB6C1;
}

section {}

div {}

div#container {
  font-family: Arial;
  max-width: 90%;
  margin: 0 auto;
  box-sizing: border-box;
}


/*Desktop*/

@media (min-width: 992px) {
  .col-lg-1,
  .col-lg-2,
  .col-lg-3,
  .col-lg-4,
  .col-lg-5,
  .col-lg-6,
  .col-lg-7,
  .col-lg-8,
  .col-lg-9,
  .col-lg-10,
  .col-lg-11,
  .col-lg-12 {
    border: 2px solid black;
    background-color: grey;
    padding-top: 30px;
    padding-left: 10px;
    float: left;
  }

  .col-lg-4 {
    width: 32%;
    float: left;
    margin: 8px;
  }
}

/*Tablet*/

@media (min-width: 768px) and (max-width: 991.99px) {
  .col-md-1,
  .col-md-2,
  .col-md-3,
  .col-md-4,
  .col-md-5,
  .col-md-6,
  .col-md-7,
  .col-md-8,
  .col-md-9,
  .col-md-10,
  .col-md-11,
  .col-md-12 {
    float: left;
    border: 2px solid black;
    background-color: grey;
    padding-top: 30px;
    padding-left: 10px;
  }
  .col-md-6 {
    width: 45%;
    float: left;
    margin: 8px;
  }
  .col-md-12 {
    width: 100%;
    float: left;
    margin: 8px;
  }

HTML代码 #

<!DOCTYPE html> Mod2_Solution

<h1>Our Menu</h1>

<p> Chicken </p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua consequat.
</p>

<section>
  <div class="col-lg-4 col-md-6">
    <p class="meat"> Beef </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua consequat.
    </p>
  </div>
</section>

<section>
  <div class="col-lg-4 col-md-12">
    <p class="meat"> Pork </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua consequat.</p>
  </div>
</section>

问题分析 #

1. 宽度计算错误：固定宽度（如桌面端32%、平板端45%）加上margin后总宽度超过容器100%，触发换行。box-sizing: border-box仅包含border和padding，不包含margin，因此总宽度=元素宽度+左右margin。
2. HTML结构混乱：Chicken内容未放入对应div容器，缺少完整的<html>/<body>标签，且所有内容未纳入#container容器，导致布局失控。
3. 样式冗余与不合理设置：重复设置float: left，段落负margin导致排版错乱，p.meat的margin值导致元素溢出容器。

修正后的代码 #

CSS代码 #

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

h1 {
    text-align: center;
    font-family: Arial;
    margin: 20px 0;
}

.content-text {
    margin-top: 10px;
    padding-right: 10px;
}

p.meat {
    float: right;
    width: 100px;
    padding: 5px;
    margin: -2px -2px 0 0;
    border: 2px solid black;
    text-align: center;
    font-size: 125%;
    font-weight: bold;
    background-color: #FFB6C1;
}

div#container {
    font-family: Arial;
    max-width: 90%;
    margin: 0 auto;
}

/* 统一列基础样式 */
.col-lg-4, .col-md-6, .col-md-12 {
    border: 2px solid black;
    background-color: grey;
    padding-top: 30px;
    padding-left: 10px;
    float: left;
    margin-bottom: 15px;
}

/* Desktop */
@media (min-width: 992px) {
    .col-lg-4 {
        width: calc(33.333% - 16px);
        margin: 0 8px;
    }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 991.99px) {
    .col-md-6 {
        width: calc(50% - 16px);
        margin: 0 8px;
    }
    .col-md-12 {
        width: calc(100% - 16px);
        margin: 0 8px;
    }
}

/* Mobile */
@media (max-width: 767.99px) {
    .col-lg-4, .col-md-6, .col-md-12 {
        width: calc(100% - 16px);
        margin: 0 8px 15px;
    }
}

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mod2_Solution</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="container">
        <h1>Our Menu</h1>
        
        <div class="col-lg-4 col-md-6">
            <p class="meat">Chicken</p>
            <p class="content-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua consequat.</p>
        </div>

        <div class="col-lg-4 col-md-6">
            <p class="meat">Beef</p>
            <p class="content-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua consequat.</p>
        </div>

        <div class="col-lg-4 col-md-12">
            <p class="meat">Pork</p>
            <p class="content-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua consequat.</p>
        </div>
    </div>
</body>
</html>

修改说明 #

1. 动态宽度计算：用calc()函数计算列宽度，减去左右margin总和，确保总宽度不超过容器100%，避免换行。
2. HTML结构修复：补全完整页面结构，将所有菜单内容放入#container，给Chicken添加对应容器，添加viewport标签适配移动端。
3. 样式优化：
   • 提取列的基础样式，减少冗余；
   • 给内容段落添加类名，修正负margin导致的排版问题；
   • 调整p.meat的margin，让标签贴合容器右上角；
   • 新增移动端媒体查询，覆盖全断点适配。
4. 对齐修复：统一设置列的左右margin为8px，确保各断点下左右对齐。

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