CSS布局：移除row类右外边距 解决col内边距设置失效问题

需求说明 #

• 移除.row类的多余右外边距
• 为示例菜单项、第一张图片设置20px右内边距
• 第二张图片不受上述右内边距规则影响

原有方案问题 #

原方案给所有.col统一设置padding-right: 20px，再给.row设置margin-right: -20px抵消溢出，未生效原因有两点：

• 全局给列加右内边距会导致第二张图片所在列也被加上间距，不符合需求
• .row被设置为display: table，该布局模式下负外边距无法按预期抵消浮动列的内边距带来的宽度溢出，同时原清除浮动写法直接作用在.row本身，会干扰正常布局计算

原有代码 #

CSS代码 #

body {
  border: 2px solid green;
}

.col {
  border: 2px solid red;
  margin-bottom: 10px;
  background-color: lightgrey;
  color: white;
  text-align: center;
  font-size: 150%;
  float: left;
  width: 100%;
  padding-right: 20px;
  box-sizing: border-box;
}

.row {
  border: 2px solid yellow;
  width: 100%;
  margin-right: -20px;
}

.col img {
  width: 100%;
  height: 10em;
  border: 2px solid blue;
}

.col-xs-6 {
  width: 50%;
}

.clearfix,
.row {
  display: table;
  content: "";
  clear: both;
}

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/practice1.css">
  <title>Document</title>
</head>
<body>
  <div class="row">
    <div class="col">
      <p>This is just a demo</p>
    </div>
    <div class="col">
      <p>This is just a demo</p>
    </div>
    <div class="col">
      <p>This is just a demo</p>
    </div>
    <div class="col">
      <p>This is just a demo</p>
    </div>
    <div class="col">
      <p>This is just a demo</p>
    </div>
    <div class="col">
      <p>This is just a demo</p>
    </div>
  </div>
  <div class="row images">
    <div class="col col-xs-6"><img src="https://static.scientificamerican.com/sciam/cache/file/7A715AD8-449D-4B5A-ABA2C5D92D9B5A21_source.png" alt="bird"></div>
    <div class="col col-xs-6"><img src="https://static.scientificamerican.com/sciam/cache/file/7A715AD8-449D-4B5A-ABA2C5D92D9B5A21_source.png" alt=""></div>
  </div>
</body>
</html>

修复方案 #

1. 移除全局.col上统一设置的padding-right: 20px，不再给所有列加右内边距
2. 移除.row上无效的margin-right: -20px
3. 新增独立的间距类.pad-right，只给需要右内边距的元素（菜单项列、第一张图所在列）添加该类，第二张图所在列不添加，自然不受影响
4. 修正清除浮动写法，改用::after伪元素实现清除浮动，不改变.row本身的布局属性

注意：不要给第二张图片所在的列添加pad-right类，即可保证它不受右内边距设置影响

修复后CSS代码 #

body {
  border: 2px solid green;
  margin: 0;
}

.col {
  border: 2px solid red;
  margin-bottom: 10px;
  background-color: lightgrey;
  color: white;
  text-align: center;
  font-size: 150%;
  float: left;
  width: 100%;
  box-sizing: border-box;
}

/* 单独控制需要右内边距的元素 */
.col.pad-right {
  padding-right: 20px;
}

.row {
  border: 2px solid yellow;
  width: 100%;
}

/* 正确的清除浮动写法 */
.clearfix::after,
.row::after {
  display: table;
  content: "";
  clear: both;
}

.col img {
  width: 100%;
  height: 10em;
  border: 2px solid blue;
  display: block;
}

.col-xs-6 {
  width: 50%;
}

HTML修改说明 #

给所有需要右内边距的列添加pad-right类即可：

• 第一组菜单的每个列标签改为<div class="col pad-right">
• 第一张图片所在列改为<div class="col col-xs-6 pad-right">
• 第二张图片所在列保持原有<div class="col col-xs-6">不变，不会被加上右内边距

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