页面居中容器内四列布局：前三列留间距，最后一列右侧无外边距

嘿，我看你想要实现前三列保留右侧外边距、最后一列去掉右外边距的布局效果，咱们来调整下代码让它更靠谱且健壮：

修正后的CSS代码 #

.footer-top { 
  width: 960px; 
  margin: 40px auto 30px; 
  overflow: hidden; 
  border: solid; 
}
.column1, .column2, .column3, .column4 { 
  float: left; 
  width: 20%; 
  margin-right: 3%; 
}
.column1 p { 
  margin: 30px 0; 
}
/* 更通用的写法：选中父容器的最后一个列元素 */
.footer-top > div:last-child { 
  margin-right: 0; 
}

为什么要这么调整？ #

• 你原来写的 .column4:last-child 在当前结构下能生效，但有点冗余——.column4 本身就是最后一列，直接写 .column4 { margin-right: 0; } 也能达到效果。
• 但用 .footer-top > div:last-child 会更健壮：如果以后你修改列的类名（比如把column4改成column-last），或者新增/调整列的数量，这个选择器依然能精准选中父容器的最后一个列元素，不用再修改CSS。

完整的HTML结构（和你提供的一致） #

<div class="footer-top"> 
  <div class="column1"> 
    <h4>LITTLE ABOUT US </h4> 
    <p>这里是你的内容...</p>
  </div>
  <div class="column2">
    <!-- 第二列内容 -->
  </div>
  <div class="column3">
    <!-- 第三列内容 -->
  </div>
  <div class="column4">
    <!-- 第四列内容 -->
  </div>
</div>

这样调整后，前三列之间会保留3%的右外边距，最后一列右侧不会有多余的外边距，完美符合你的需求~

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