容器div的自适应CSS

Question

我有一个带有2个子面板的容器div，可以实现自适应布局。

由此，我只是说在桌面上，2个儿童面板应该并排浮动 在iPhone上，2个子面板应该是一个低于另一个

现在下面是我的HTML;

<div class="container">
<div class="panel1"></div>
<div class="panel2"></div>
</div>

对于CSS，我只使用桌面/ iPhone的媒体查询。

对于桌面（即更高的可用宽度），我的CSS是

.panel1{width:50%;float:left} //Span 50% of desktop width
.panel2{width:50%;float:left} //Span 50% of desktop width

对于iPhone（即较低的可用宽度），我的CSS是

.panel1{width:100%;float:left} //Span entire iPhone width
.panel2{width:100%;float:left} //Span entire iPhone width

现在我的问题是我应该如何对容器div进行编码，使其在所有主流浏览器中都能正常工作？

即。我应该在CSS（桌面/ iPhone）的容器中使用“float”，还是使用2个子面板来制作浮动：无？

实际上我知道将2个儿童小组作为

  

宽度：100％;浮动：左

在iPhone上可以正常工作...但我对它们使用浮动有点不舒服：左边但是在屏幕上显示为一个低于其他...

请为此建议一些最佳做法。

Answer 1

杀掉iPhone的花车，你不需要那些。只需使用块元素，它们将自然地低于彼此，并自动使用所有可用宽度。

您可以将overflow: hidden用于容器div，以便它使用浮动扩展高度/宽度。