html - 向左浮动，最大宽度和流量控制

Question

理想情况下，我想要一个宽度在 16-30em 之间的可变左侧面板和一个固定在 16em 宽的右侧面板。当屏幕缩小到 32em 或更小时，我希望右侧面板在左侧下方流动。我希望这一切都左对齐。

我找到了几个并排的例子，但只有一个固定宽度的左边 float 它和可变的右面板，或者 float 右边和一个可变的左面板。我设法在外部放置了一个 div 并使布局工作到我想要在左侧下方流动右侧面板(或左侧在右侧下方 - 我不介意哪个):

http://jsfiddle.net/Ph3S8/2/

我尝试使用 @media (min-width: 15em) 并在其中嵌套一些更改，因为基本上当屏幕小于 .left:min-width + 时。 right:min-width 我只需要去掉右侧面板上的 float:right ，但似乎没有任何效果(我不确定它是否应该在 jsfiddle 中，但它没有我的真实例子也是。我不介意哪个面板在另一个面板下弹出，但我只需要它适用于具有标准 CSS 的移动设备——我还有其他一些东西可以在屏幕达到 72ems 等时工作，但我没有写那个:)

非常感谢任何帮助。

Answer 1

使用这个媒体查询。

@media (max-width: 15em)
{
    .right {
         width: auto;
         float:none;
    }
}