1

だから私は3つの列（新聞のストリップスタイル）に分割したテキストの本文を持っています。それはうまくいきます。ただし、サイズ変更の互換性については、特定のサイズ未満の画面に 1 つの列だけを表示したいと考えています。

コード - HTML

<div class="columnContainer">
    <p>
        <span>Some text here that will display in the first column.
        </span>
        <span>Some text here that will display in the second column.
        </span>
        <span>Some text here that will display in the third column.
        </span>
    </p>
</div>

CSS

 .columnContainer{
        position:relative;
    width:100%;
    max-width:750px;
    height:auto;
    min-height:145px;
    display:block;
    margin:0 auto;
    }

    .columnContainer span{
    position:relative;
    width:29%;
    height:auto;
    float:left;
    margin:0 2%;
    text-align:justify;
    }

そしてCSSのサイズ変更

@media (max-width:630px){
    .columnContainer span{
        width:100%;
        display:inline;
    }

テキストが 1 つの塗りつぶされたブロックとして表示されることを望んでいました。お気に入り：

最初の列のテキスト本文。2 列目のテキスト本文。3 列目のテキスト本文。

ただし-出力表示：

最初の列のテキスト本文。
2 列目のテキスト本文。
3 列目のテキスト本文。

4

3 に答える 3

0

メディア クエリ内の宣言は、他の宣言に追加されます。float: leftしたがって、を元に戻す必要がありますfloat: none 

@media (max-width:630px) {
    .columnContainer span {
        display:inline;
        float: none;
    }
}

JSFiddleを参照してください

于 2013-10-24T14:50:16.673 に答える