纯 CSS 网格不会彼此相邻浮动

Question

我正在尝试使用纯 CSS 布局构建网站。

Pure CSS

当我尝试使用最基本的 2 列布局时，宽度为 1/2 的 div 不会彼此相邻浮动。我可以看到它们的宽度是 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 网站：

纯网格的唯一限制是所有“单元”都是“网格”的子级。换句话说，如果您有一个具有 pure-u-* 类名的元素，则它必须位于具有 pure-g 或 pure-g-r 类名的父元素内。

因此，我认为您不应将列嵌套在其他列下。如果删除父列，它们会正确浮动：

<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>

或者您是否打算将一列细分为两列？如果是这样，我认为最优雅的解决方案（不显式覆盖外部文件）是计算细分列的所需宽度并相应地设置它们。请澄清。

Answer 3

删除包装div：

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