0

我正在尝试创建一个包含两个相邻框的单列的响应式网格。⅓ 列在左侧，⅔ 列在右侧。这是http://codepen.io/htmlcheats/pen/OWMobO上 codepen 的非响应版本：

<div class="pure-g">
    <div class="pure-u-1-3" style="background-color: red; height: 10em;">
        Box 1 - 33.3% width uses pure-1-3 style
    </div><!-- .pure-u-1-3 -->
    <div class="pure-u-2-3" style="background-color: teal; height: 10em;">
        Box 2 - 66.6% width uses pure-2-3 style
    </div><!-- .pure-u-2-3 -->      
</div><!-- .pure-g -->

它按预期工作。当我将它们挤压在一起或拉伸它们时，它们保持相邻。

这是响应版本（ http://codepen.io/htmlcheats/pen/OWMobO上的 codepen ）：

<div class="pure-g">    
    <div class="pure-sm-md-1-3 pure-u-md-1-3 pure-u-lg-1-3 pure-u-1" style="background-color: red; height: 10em;">
        Box 1 - 33.3% width uses pure-1-3 style
    </div><!-- .pure-u-1-3 -->
    <div class="pure-sm-md-2-3 pure-u-md-2-3 pure-u-lg-2-3 pure-u-1" style="background-color: teal; height: 10em;">
        Box 2 - 66.6% width uses pure-2-3 style
    </div><!-- .pure-u-2-3 -->  
</div><!-- .pure-g -->

当我压扁页面时，它们仍然彼此重叠。如果我理解正确，他们应该折叠并创建一个单列，红色框位于蓝绿色的顶部。

你能告诉我我做错了什么吗？

4

1 回答 1

1

您问题中的两个 codepen 链接（无响应的和响应的）是相同的 - 它们都链接到您的示例的无响应版本，但我发现我认为是您的响应示例。

无论如何，要在 purecss 中启用响应式网格，您必须包含单独的响应式网格 CSS 文件以及基础 purecss 文件。从响应式网格文档中：

由于媒体查询不能被覆盖，我们不将网格系统作为 pure.css 的一部分。您必须将其作为单独的 CSS 文件拉入。您可以通过将以下标签添加到您的页面来做到这一点。

<!--[if lte IE 8]>
    <link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/grids-responsive-old-ie-min.css">
<![endif]-->
<!--[if gt IE 8]><!-->
    <link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/grids-responsive-min.css">
<!--<![endif]-->

我拿了你的笔的响应版本，并添加了响应 CSS 文件的链接（上面的代码块），它按预期工作。归根结底，您的 CSS 链接应如下所示：

<!-- base purecss file -->
<link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/pure-min.css" integrity="sha384-CCTZv2q9I9m3UOxRLaJneXrrqKwUNOzZ6NGEUMwHtShDJ+nCoiXJCAgi05KfkLGY" crossorigin="anonymous">

<!-- purecss responsive grids -->
<!--[if lte IE 8]>
    <link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/grids-responsive-old-ie-min.css">
<![endif]-->
<!--[if gt IE 8]><!-->
    <link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/grids-responsive-min.css">
<!--<![endif]-->
于 2017-01-12T18:38:49.003 回答