响应 CSS 容器仅在平板电脑尺寸上损失利润

Question

我有以下 CSS，它的设计目的是在中等尺寸下调整到一定数量的列，然后在 small/mobile 尺寸下调整为全角项目。一切似乎都有效，除了在 medium/tablet 大小下，外部容器上的 margin-top（例如）和 .columnContainer class 显然被丢弃了。

我已经尝试了所有我能想到的方法来解决这个问题，但还是碰壁了。在此先感谢您的帮助，您可以在此处使用 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..

响应 CSS 容器仅在平板电脑尺寸上损失利润

Response CSS container losing margin at tablet size only

css

margin

css-selectors

responsive-design

responsive