Iphone 容器div的自适应CSS

我有一个容器div，其中有两个子面板将作为自适应布局实现

我的意思是，在桌面上，两个子面板应该并排浮动 在iPhone上，两个子面板应该一个接一个

下面是我的HTML

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

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

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

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

现在我的问题是，我应该如何对container div进行编码，以便它在所有主要浏览器中都能正常工作

i、 e.我应该在CSS（桌面/iPhone）中使用“float”作为容器，还是使用两个子面板，比如使float:none

事实上，我知道将2个子面板作为

宽度：100%；浮动：左

在iPhone上可以很好地工作…但我有点不舒服，尽管他们使用float:left，但在屏幕上显示为一个接一个

---

请提供一些最佳实践。

取消iPhone的浮动，你不需要这些。只需使用块元素，它们将自然地彼此位于下方，并自动使用所有可用宽度

---

您可以对container div使用

overflow:hidden

，这样它就可以随着浮点数在高度/宽度上扩展。

为iPhone禁用浮点数，您不需要这些浮点数。只需使用块元素，它们将自然地彼此位于下方，并自动使用所有可用宽度

---

你可以对container div使用

overflow:hidden

，这样它就可以随着float在高度/宽度上扩展。

Thx很多。.我刚刚试过你说的。.如果我对两个子面板使用float:none，并在iPhone CSS中为container添加overflow:hidden，容器没有按照子div进行扩展。您是否有机会对此进行研究？使用

float:none

容器上不需要

overflow:hidden

属性。但即使有了这样的财产，它也应该正常扩张。您确定iPhone的目标媒体是手持设备吗？现代手机通常呈现网站，你可能需要使用javascript来检测浏览器和操作系统。是的，它不会根据内容进行扩展。。还有媒体查询,，实际上，我使用的是屏幕宽度，而不是设备宽度。因此，这里没有问题。不确定在两个单独的css（如溢出或浮点）中切换属性时是否会出现问题。虽然这看起来不太可能。Thx很多。我只是尝试了你说的。如果我对两个子面板使用浮点：无另外，在iPhone CSS中为容器添加溢出：隐藏，容器没有按照子div进行扩展。您有机会了解一下吗？使用

float:none

时，容器上不需要

overflow:hidden

属性。但即使有了这样的财产，它也应该正常扩张。您确定iPhone的目标媒体是手持设备吗？现代手机通常呈现网站，你可能需要使用javascript来检测浏览器和操作系统。是的，它不会根据内容进行扩展。。此外，对于媒体查询，我实际上使用的是屏幕宽度，而不是设备宽度。因此，这里没有问题。不确定在两个单独的css中切换属性时是否会出现一些问题，如溢出或浮动。尽管这看起来不太可能。。