0

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

纯 CSS

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

3 回答 3

3

试试这个：

<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>
于 2013-07-22T03:20:32.727 回答
1

从 pure.css 网站：

纯网格的唯一限制是所有“单元”都是“网格”的子级。换句话说，如果您有一个具有 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>

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

于 2013-07-22T03:18:12.850 回答
1

删除包装 div：

<div class="pure-u-1">
于 2013-07-22T03:18:45.957 回答