Question

我在响应式设计中实现了一种工具栏。工具栏部分实现为浮动DIV，它们并排放置，它们之间有很好的间隙。然而，在较低宽度的设备上，由于空间越来越少，DIV正在垂直堆叠。这当然是一件好事，但是有一个小问题：它们彼此堆叠而没有垂直间隙，或者它应该是两倍大的垂直间隙（我使用容器条上的填充或每个工具栏上的边距）第DIV节）。这两个看起来都不太好。

DIV可以有动态宽度，我不知道它们将堆叠在哪个容器宽度上，所以我不能使用某种宽度断点和媒体查询。

如何考虑垂直堆叠的DIV样式，以便在垂直堆叠的情况下，它们之间会有正确的间隙？

我只需要支持现代浏览器（较新的Chrome，较新的Firefox，IE9 +）。

Answer 1

如果您无法使用媒体查询来定位它们（因为您不确定它们何时会堆叠），那么您别无选择，只能向它们添加上边距（或填充，具体取决于您的需要）。这将使它们在没有堆叠时保持一致（因为它们都具有相同的上边距/填充）并且当它们折叠时它们将在它们之间给出垂直空间。

您甚至可以向包含元素添加负上边距，以便浮动div上的上边距在折叠之前不会有任何可见效果。

.container {
  margin-top: -20px;
}

.box {
  border: 1px solid #000;
  width: 250px;
  margin-top: 20px;
  float: left;
  height: 100px;
 }

<div class="container">
  <div class="box">
  </div>
  <div class="box">
  </div>
 </div>

如何检测（和样式）两个浮动DIV是否由于缺少容器宽度而垂直堆叠？

1 个答案: