1

「display: table」を使用してレスポンシブ列を作成しようとしていますが、これが私が思いついたものです。

http://jsfiddle.net/ejkim2000/NXmfk/

html

 <body> 
 <section id="colors"> 
   <ul id="columns">
        <li class="red">red</li>
        <li class="yellow">yellow</li>
        <li class="blue">blue</li>
   </ul>
</section>
</body>

CSS

body { height: 100%;
        width: 100%;
        background-color: #ccc;
}
#colors {
    display:block;
    overflow:hidden;
    position:relative;
    height: 1000px;
    width: 100%;
}
#columns {
    height: 100%;
    width: 100%;
    display: table;
}
#columns li {
    overflow:hidden;
    width: 33.33%;
    text-align: center;
    vertical-align: middle;
    display: table-row;
}
.red {
    background-color: red;
    }
.yellow {
    background-color: yellow;
    }
.blue {
    background-color: blue;
    }
@media only screen and (min-width: 479px) {
    #colors {
    height: 320px;
    width: 100%;
}
#columns li {
    display: table-cell;
}    
}
@media only screen and (min-width: 768px) {
    #colors {
    height: 700px;
    width: 100%;
}
#columns li {
    display: table-row;
}    
}

@media only screen and (min-width: 980px) {
    #colors {
    height: 700px;
    width: 100%;
}
#columns li {
    display: table-cell;
}    
}

ブラウザのプレゼンテーションを回転させたり、ウィンドウのサイズを変更したりしても、Firefox、IE9、および Chrome(デスクトップ) でうまく機能します。問題はありません。

ただし、Safari (デスクトップ)、Safari (モバイル)、および chrome (モバイル) では非常に奇妙な動作を示します。最初は適切な列が表示されますが、画面を回転させるかウィンドウのサイズを変更すると、基本的には空の列が 1 つまたは 2 つ追加されます。上記のjsfiddleの例をサファリでサイズ変更すると、アイデアが得られるか、次の画像がその方法を示しています。

私は答えを探してきましたが、誰も私と同じ問題を抱えているようには見えません。

この問題を解決するのを手伝ってくれませんか?

4

0 に答える 0