CSS flex列顺序 - Chrome问题?

时间:2015-07-25 18:58:15

标签: html css flexbox

我正在尝试“动员”我正在处理的网站,我进行了设置,以便文本框位于带有display:flex,flex-direction:column的列中。然后我订购了div,因为它们需要在移动设备上以不同于常规浏览器的方式显示。

Location.objects.filter(geometry__dwithin=(pnt, D(mi=2))) http://codepen.io/anon/pen/gpBvyg

据我所知,它看起来在FF中正确格式化。但在Chrome中,它的高度增加了一倍,至少对我来说是这样。这是一个错误还是我错过了什么?

如果我遗漏任何细节需要澄清,请告诉我。

谢谢!

1 个答案:

答案 0 :(得分:0)

您的br元素之间有div个元素,这些元素是您的Flexbox的子元素。当您重新排序div元素时,您没有订购占据页面顶部并创建空白区域的br元素。

我建议删除所有br元素,并尝试在没有它们的情况下让您的非移动网页看起来很好。

这是一个删除了所有BR的codepen。 http://codepen.io/anon/pen/ZGqxzm

顶部没有占用空间。

如果您发布更多代码,我可以为您提供更多有关如何在移动设备和桌面设备上轻松完成此项工作的建议。