html - 响应式 5 个 div 元素 CSS，一一

Question

我在使用 5 个 div 元素使其响应时遇到了问题。

我有这样的 div 元素:

<div class="AllCont">
  <div class="ContQuint">
    <div>Here Image 1</div>
  </div>
  <div class="ContQuint">
    <div>Here Image 2</div>
  </div>
  <div class="ContQuint">
    <div>Here Image 3</div>
  </div>
  <div class="ContQuint">
    <div>Here Image 4</div>
  </div>
  <div class="ContQuint">
    <div>Here Image 5</div>
  </div>
</div>

像这样的样式 CSS:

.AllCont {
  display: table;
  border-collapse : collapse;
  width: 100%;
}
.ContQuint {
  display: table-cell;
  width: 20%;
}

并尝试在 CSS 中对此做出响应:

@media only screen and (max-width:1540px) {
.ContQuint {
    display: table-row;
  }
}

但我不想要那个。我想要这样的东西:

<强>|元素 1 - 元素 2 - 元素 3 - 元素 4 - 元素 5 |

然后当屏幕尺寸缩小一点时我想要这个:

<强>|元素 1 - 元素 2 - 元素 3 - 元素 4 |

<强>|元素 5 |

然后当减少更多时:

<强>|元素 1 - 元素 2 - 元素 3 |

<强>|元素 4 - 元素 5 |

还有一点:

<强>|元素 1 - 元素 2 |

<强>|元素 3 - 元素 4 |

<强>|元素 5 |

最后:

<强>|元素 1 |

<强>|元素 2 |

<强>|元素 3 |

<强>|元素 4 |

<强>|元素 5 |

---

我如何使用 CSS 或 javascript 做到这一点？

Answer 1

我想你要找的是 display: inline-block;!在父 .AllCont 元素上加上 display: block。表格曾经对这种布局很有用，但现在您将有更好的时间检查 flexbox (甚至 CSS grid )以获得更复杂的东西。