【问题标题】:Overlapping Div despite with float尽管有浮动,但仍重叠 Div
【发布时间】:2015-02-12 14:17:12
【问题描述】:

我正在尝试这样做。

用这个sass。

#map {
    @include grid-span(8,1);
}

#form {
    @include grid-span(4,9);
}

#info {
    @include grid-span(8,1);
}

问题是#form 和#map div 重叠。

这是在 12 列网格上。

我知道我需要清除和浮动。尝试了很多组合。我已经阅读了关于浮动和隔离的类似问题的链接。还是不明白。请赐教。

【问题讨论】:

标签: singularitygs


【解决方案1】:

正如您所指出的,您正在寻找的是 Clears。

floatisolationcalc 输出样式的 Singularity 中,附加到网格的所有项目都是浮动的 left,除非跨度在一行的最后一列结束,在这种情况下它浮动right。这意味着,在您的示例中,#map#info 向左浮动,#form 向右浮动。

清除似乎很棘手,但我发现只是大声说出它们会有所帮助。 clear: left 或“向左清除”是“清除向左浮动的所有内容”。 clear: right 或“清除正确”是“清除所有向右浮动的内容”。 clear: both 或“清除两者”是“清除左右浮动的所有内容”。 clear: none 或“清除无”是“什么都不清除,无论是向左还是向右浮动”。在这种情况下,“一切”是“出现在我之前的所有同级元素”。

考虑到这一点,您要做的是明确#map#map 是浮动的 left,因此您可以将 clear: left 添加到您的 #info 项目中。这将清除#map,但不会添加您要查找的边距。幸运的是,百分比,即使用于顶部/底部,仍然基于浏览器的width,所以如果你想要#info#main 之间的间距与它们和#form 之间的间距相同,所有您需要做的是将margin-top: gutter-span(); 添加到#info

最后,这是您最终拥有的代码:

#map {
  @include grid-span(8,1);
}

#form {
  @include grid-span(4,9);
}

#info {
  @include grid-span(8,1);
  clear: left;
  margin-top: gutter-span();
}

这是你的 SassMesiter 的一个分支,showing it in action

【讨论】:

  • 感谢您花时间回答这个问题。感谢 Singularity.gs。我喜欢它,因为语法可读。
  • 侧面跟踪:虽然您的解决方案在上下文中解决了问题,但当我放入我的项目时,#form 被向下推,与 #info 一起刷新。你能指出我应该寻找故障排除的方向吗? p/s 我无法在 sassmeister 中重现我的问题。即它在 Drupal Omega 4 主题上。
猜你喜欢
  • 2015-08-05
  • 1970-01-01
  • 1970-01-01
  • 2015-04-08
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-10-30
  • 1970-01-01
相关资源
最近更新 更多