css - 响应 CSS 容器仅在平板电脑尺寸下损失边际

Question

我有以下 CSS，其设计目的是在中等尺寸下调整到一定数量的列，然后在小尺寸/移动尺寸下调整为全 Angular 元素。一切似乎都有效，除了在中型/平板电脑尺寸下，外部容器上的 margin-top(例如)和 .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% }
}

Answer 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 ..