我有一堆包含图像和 h1 标题的锚标签。我已经应用了浮动元素,以允许它们以 2 行为单位进行布局。但出于某种奇怪的原因,银河系链接导致下一个锚点向右浮动。如果你用土星交换银河系,它工作得很好。我无法为我的生活找出原因。谁能向我解释这个奇怪的现象?
这是我页面的 jsfiddle:http: //jsfiddle.net/SVuQQ/
我有一堆包含图像和 h1 标题的锚标签。我已经应用了浮动元素,以允许它们以 2 行为单位进行布局。但出于某种奇怪的原因,银河系链接导致下一个锚点向右浮动。如果你用土星交换银河系,它工作得很好。我无法为我的生活找出原因。谁能向我解释这个奇怪的现象?
这是我页面的 jsfiddle:http: //jsfiddle.net/SVuQQ/
如果您添加clear:both
到仙女座锚,它将解决浮动问题。我进行了设置,因此您可以将该.clear
类添加到任何其他可能需要它的锚点,如果您添加更多。
解释:一个clear:both
带有浮动元素的元素可以防止左右浮动的元素对页面布局的流程产生影响。在这种情况下,银河系锚浮子对下面的元素产生了不利影响。通过添加clear:both
仙女座锚,银河系的漂浮物不再推低其余元素。
替代解决方案:浮动问题正在发生,因为您有不同高度的锚标签。它们不能正确堆叠,因为一个浮动比另一个向下推得更远。如果您为所有这些设置相同的高度,它将在没有 clear:both 的情况下解决问题。jsfiddle.net/SVuQQ/7
我建议尝试设置你的#subject-content a-menu {height: auto}
并删除 float:left 在同一行(例如#subject-content a-menu)