2

我有一个响应式设计，我对它比较陌生，在主要内容区域有一系列流畅的图像。在 800 像素以下，此内容区域有一个大图像，跨越其整个宽度，然后是 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%; }

在 800 像素及以上，内容区域变为第一行一个大图像和一个小图像，然后是 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 个小图像以及所有后续图像中的 3 个图像）是正确的。

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

更复杂的是，在 Chrome 或 Safari 中检查 HTML 或仅单击内容通常会导致内容区域扩展到其预期大小。所以......有点难以看到到底发生了什么。此外，调整窗口大小，有时甚至只是一点点，都会更正大小。

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

任何帮助是极大的赞赏。

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

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

4

1 回答 1

0

原来问题是 1 列固定 1 列流体布局中的流体列不能浮动。当某些内容包含在其中时，将其向左浮动会导致列崩溃。

于 2012-11-13T00:46:24.130 回答