html - 純粋な CSS グリッドが隣り合って浮かない

Question

Pure CSS レイアウトを使用して Web サイトを構築しようとしています。

純粋なCSS

最もdiv基本的な 2 列のレイアウトを使用しようとすると、幅が 1/2 の が隣同士に浮かびません。幅が 50% であることがわかります。

これは予想される動作ですか、それとも を明示的にフロートする必要がありますdivか

以下の両方のスタイル シートを参照しました。

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.2.1/base-min.css"> <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.2.1/pure-min.css">

<div class="pure-g">
        <div class="pure-u-1">
            <div class="pure-u-1-2">
                 Lorem ipsum dolor it amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
                tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
                quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
                consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
                molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et
                accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
                duis dolore te feugait nulla facilisi.
            </div>
            <div class="pure-u-1-2">
                Lorem ipsum dolor it amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
                tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
                quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
                consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
                molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et
                accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
                duis dolore te feugait nulla facilisi.
            </div>
        </div>
   </div> 

Answer 1

これを試してください：

<div class="pure-g">
        <div class="pure-u-1">
            <div class="pure-u-1-2" style="float:left;">
                 <p>Lorem ipsum dolor it amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
                tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
                quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
                consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
                molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et
                accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
                     duis dolore te feugait nulla facilisi.</p>
            </div>
            <div class="pure-u-1-2">
                <p>Lorem ipsum dolor it amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
                tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
                quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
                consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
                molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et
                accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
                    duis dolore te feugait nulla facilisi.</p>
            </div>
        </div>
   </div> 

Answer 2

pure.css Web サイトから:

Pure Grid の唯一の制約は、すべての「ユニット」が「グリッド」の子であることです。つまり、pure-u-* クラス名を持つ要素がある場合、pure-g または pure-gr クラス名を持つ親要素内にある必要があります。

したがって、追加の列の下に列をネストしないでください。親列を削除すると、正しく浮動します。

<div class="pure-g">
            <div class="pure-u-1-2">
                 Lorem ipsum dolor it amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
                tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
                quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
                consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
                molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et
                accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
                duis dolore te feugait nulla facilisi.
            </div>
            <div class="pure-u-1-2">
                Lorem ipsum dolor it amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
                tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
                quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
                consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
                molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et
                accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
                duis dolore te feugait nulla facilisi.
            </div>
   </div>

それとも、1 つの列を 2 つの列に分割するつもりですか? もしそうなら、(外部ファイルを明示的にオーバーライドすることなく) 最も洗練された解決策は、分割された列の希望の幅を計算し、それに応じて設定することだと思います。どうか明らかにしてください。

Answer 3

ラッピング div を削除します。

<div class="pure-u-1">