css - レスポンシブフロートの問題

Question

私はレスポンシブ Web サイトを開発しており、行ごとに 3 列、2 列、最後に 1 列になります。

私が抱えている問題は、テキストの長さが列によって異なることです。これは、一部の列が収まらず、押し下げられていることを意味します。列は流動的であるため、画面サイズに応じてテキストが長くなったり短くなったりすることに注意してください。

これを修正する最も効果的な方法はどれですか?

Answer 1

これがあなたが望むものかどうかは完全にはわかりませんが、http://jsfiddle.net/H5E35/1/を見てください^^

.container {
    width: 100%;
    margin: 0 auto;
    font-size: 0px; // fix, so there is no gap between the elements
    vertical-align:top;
}

.col {
    vertical-align:top;
    font-size: 14px;
    width: 33.33%; // is more precise than 33
    background-color: green;
    display: inline-block;
}

@media screen and (max-width: 1000px) {
    .col {
        width: 50%;
    }
}

@media screen and (max-width: 700px) {
    .col {
        width: 100%;
    }
}