html - float 元素内的 float 元素

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