2

私はレスポンシブ デザインを使用していますが、これは比較的新しいもので、プライマリ コンテンツ領域に一連の流動的な画像があります。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 以上では、コンテンツ領域は 1 つの大きな画像と 1 つの小さな画像の最初の行に変わり、その後に 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 で繰り返すことができないようです。
- レイアウトは流動的な 2 列目の固定サイドバーです。
- 問題が発生した場合、コンテンツ領域の幅が「私たちの仕事」という見出しの幅になってしまうようです。

4

1 に答える 1

0

問題は、1列固定の1列流体レイアウトの流体列をフロートできないことでした。左に浮かせると、特定のコンテンツが含まれているときに列が折りたたまれました。

于 2012-11-13T00:46:24.130 に答える