理想情况下,我希望左侧面板的宽度在16-30em之间,右侧面板的宽度固定为16em。当屏幕缩小到32em或更小时,我希望右侧面板在左侧下方流动。我希望所有这些都对齐。
我发现了一些并排的示例,但是通过浮动它和可变的右面板,或者浮动右和可变的左面板,只能在左边固定宽度。我设法在外部放置了一个div周围的东西,并使布局正确进行到我想让右侧面板在左侧下方流动的位置(或右侧下方的左侧-我不感到困惑):
http://jsfiddle.net/Ph3S8/2/
我尝试使用@media (min-width: 15em)
并在其中嵌套一些更改,因为基本上当屏幕小于.left:min-width + .right:min-width
时,我只需要取出float:right在右侧面板上,但似乎没有任何效果(我我不确定是否应该在jsfiddle中使用它,但是在我的真实示例中也没有。当屏幕达到72ems等时可以工作,但是我没有写:)
任何帮助,不胜感激。
最佳答案
使用此媒体查询。
@media (max-width: 15em)
{
.right {
width: auto;
float:none;
}
}
关于html - 向左 float ,最大宽度和流量控制,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/21215685/