响应 CSS 容器仅在平板电脑大小时丢失边距答案

【问题标题】：Response CSS container losing margin at tablet size only响应 CSS 容器仅在平板电脑大小时丢失边距
【发布时间】：2017-09-13 07:46:20
【问题描述】：

我有以下 CSS，旨在调整为中等大小的一定数量的列，然后是小/移动大小的全宽项目。一切似乎都有效，除了在中等/平板电脑大小时，外部容器上的边距顶部（例如），带有 .columnContainer 类，显然被丢弃了。

我已经尝试了所有我能想到的办法来解决这个问题，但结果还是碰壁了。提前感谢您的帮助，您可以在这里使用 CSS：https://jsfiddle.net/xvLmhfpa/

// This is getting stripped at medium size only!
.columnContainer { margin-top: 20px }

// Large size
@media all and ( min-width: 768px ) {

  .columnContainer { 
    display: table;
    width: 100%;
  }
  .columnContainer > div { 
    display: table-cell;
  }

}

// Medium/tablet size
@media all and ( max-width: 767px ) and ( min-width: 481px ) {

  .columnContainer { 
     width: 100%;
  }

  .columnContainer > div {
    float: left;
    width: 100%;
  }

  .columnContainer.collapse2 > div { width: 50%; }
  .columnContainer.collapse2 div:nth-child(2n+1) { clear: both; }
  .columnContainer.collapse3 > div { width: 33.33%; }
  .columnContainer.collapse3 div:nth-child(3n+1) { clear: both; }
  .columnContainer.collapse4 > div { width: 25%; }
  .columnContainer.collapse4 div:nth-child(4n+1) { clear: both; }
  .columnContainer.collapse5 > div { width: 20%; }
  .columnContainer.collapse5 div:nth-child(5n+1) { clear: both; }
  .columnContainer.collapse6 > div { width: 20%; }
  .columnContainer.collapse6 div:nth-child(5n+1) { clear: both; }
}

// Small/mobile size
@media all and ( max-width: 480px ) {
  .columnContainer > div { width: 100% }
}

【问题讨论】：

标签： css responsive-design css-selectors margin responsive

【解决方案1】：

这是因为您的中等大小有float:left.. 在 div 中添加display:inline-block..

@media all and ( max-width: 767px ) and ( min-width: 481px ) {

.columnContainer { 
     width: 100%;
     display:inline-block;
  }

  .columnContainer > div {
    float:left;
    width: 100%;
  }

这是更新后的fiddle..

【讨论】：