代码之家 › 专栏 › 技术社区 › Iucounu

响应CSS容器仅在平板电脑大小时失去利润

responsive margin css-selectors responsive-design css

0

Iucounu · 技术社区 · 8 年前

// 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% }
}

1 回复 | 直到 8 年前

1

0

Shadow Fiend 8 年前

因为你有 float:left 中等尺寸。。添加 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 ..