浮动元素中的浮动元素

Question

如果我有以下布局

<div style='float: left;'>Outer Div </div>
<div style='float: left;'>
     <div style='float: left;'>Inner Div </div>
     <div style='float: left;'>Inner Div </div>
     <div style='float: left;'>Inner Div </div>
     <div style='float: left;'>Inner Div </div>
     <div style='float: left;'>Inner Div </div>
</div>

当首先调整浏览器的大小时，第二个外部div将在第一个外部div下折叠。只有在那之后，内部div才会崩溃。有没有办法在外部div折叠之前先让内部div折叠？

Answer 1

这是一种奇怪的情况。

要做你想做的事情，我认为你需要去响应式设计media查询。基本上，你可以根据浏览器窗口的宽度给出有条件的CSS规则。

@media only screen and (max-width: 500px) {
    body {
        background-color: lightblue;
    }
}

http://www.w3schools.com/css/css_rwd_mediaqueries.asp