Question

我有一个响应式设计，我相对较新，在主要内容区域有一系列流畅的图像。低于800px这个内容区域有一个大的图像，跨越它的全宽，然后是2个图像的列：

body.our_work #work ul {
    list-style: none;
    margin: 0%;
    padding: 0%; }

    body.our_work #work ul li {
        float: left;
        margin: 0% 1.075268817204% 1.075268817204% 0%; /* 10/930 */
        position: relative; }

        body.our_work #work ul li.small {
            width: 49.462365591398%; /* 460/930 */ }

            body.our_work #work > ul > li:nth-child(odd) {
                margin-right: 0%; }

在800px及以上，内容区域变成一个大图像和一个小图像的第一行，然后是3行图像的行：

@media screen and (min-width: 800px) { 

    /* Convert to 3 Columns */
    body.our_work #work ul li { 
        margin: 0% 1.075268817204% 1.075268817204% 0%; /* 10/930 */ }

        body.our_work #work > ul > li:nth-child(odd) {
            margin-right: 1.075268817204%; }

        body.our_work #work ul li.large {
            width: 66.129032258065%; /* 615/930 */ }

        body.our_work #work ul li.small {
            width: 32.616487455197%; /* 303.3333333333333/930 */ }

        body.our_work #work ul li.large + li.small {
            margin-right: 0% !important;
            width: 32.795698924731%; /* 305/930 */ }

        body.our_work #work > ul > li:nth-child(5) {
            margin-right: 0% !important; }
}

由于某种原因，大约20-30％的时间内该区域将“崩溃”，使得它和包含的图像只是该列全宽的一部分。然而，该结构（即第1行中的1个大图像和1个小图像以及随后的所有图像中的3个图像）是正确的。

我认为这与浏览器绘制页面时不知道内容区域有多大这一事实有关，因为图像是流动的。

要使事情复杂化，在Chrome或Safari中检查HTML或仅点击内容通常会导致内容区域扩展到预期的大小。所以...有点难以看出究竟发生了什么。此外，调整窗口大小，有时甚至只是一点点，可以纠正尺寸。

请注意，我在iPhone，iPad或Kindle Fire上没有遇到此问题。

非常感谢任何帮助。

jsFiddle：http://jsfiddle.net/p8n9W/

更新1：
- 我似乎无法在Firefox中重复 - 布局是一个带有流体第二列的固定侧边栏 - 当问题确实发生时，内容区域的宽度似乎最终成为标题“我们的工作”的宽度。

Answer 1

原来问题是1柱固定1柱流体布置中的流体柱不能浮动。向左浮动会导致列在包含特定内容时崩溃。

流体中的内容崩溃，响应式设计

1 个答案: