1

フィドル

大きな画面では行ごとに 2 つの項目を表示し、小さな画面では 1 つの項目のみを表示するレスポンシブ グリッドを作成しようとしています。

Pure.css を使用してこれを実行できることがわかりましたが、構文が正しいのに機能しません。

アイテムは、互いに重なるまで同じ行にとどまります。

<div class="pt-holder pure-u-1-2 pure-u-md-1-1">                    
    <img src="Images/pt/mikko.jpg" alt="Mikko Paavola" />
        <h3>Mikko Paavola</h3>              
        <span> 
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi laoreet dapibus quam, sit amet tempor felis egestas et. In eu metus ultrices, 
            luctus nunc egestas, euismod magna.
            ...
4

2 に答える 2

1

私はあなたの Fiddle をフォークし、最新のブラウザーに必要な grids-responsive-min.css を追加し、html/css を微調整しました。http://jsfiddle.net/macguru2000/pkfsoavg/で確認してください。

.pt-holder純粋なグリッドの div にはカスタム ルールを適用してはならないため、css ルールを削除する必要がありました。また、 の 20% のパディングを削除しました.pt-holder span。写真の下のテキストがオフセットされていました。レスポンシブ グリッドの設定も交換しましpure-u-1-1 pure-u-md-1-2た。幅の広いモニターに 2 つの列を表示し、幅の狭いモニターに 1 つの列を表示する方が理にかなっています。

しかし... 純粋なグリッド クラスをpure-u-1-2 pure-u-md-1-1.

ご存知のように、純粋なレスポンシブ グリッド css ファイルを含める必要があります。以下の HTML スニペットを使用して、コアの pure.css とレスポンシブ グリッド (最新のブラウザーと古い IE の両方) を含めることができます。

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
<!--[if lte IE 8]>
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/grids-responsive-old-ie-min.css">
<![endif]-->
<!--[if gt IE 8]><!-->
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/grids-responsive-min.css">
<!--<![endif]-->
于 2014-12-03T23:18:29.040 に答える