Question

我正在尝试使用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">

纯CSS网格不会彼此相邻

3 个答案: