html - pure-u-1-7 与 sm、md、lg、xl 结合使用时不起作用-6ren

html - pure-u-1-7 与 sm、md、lg、xl 结合使用时不起作用

转载作者：行者123 更新时间：2023-11-28 11:19:13

25

4

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Your page title</title>
  <link rel="stylesheet" href="unpkg.com/purecss@1.0.1/build/pure-min.css">
  <link rel="stylesheet" href="grid.css">
  <link rel="stylesheet" href="unpkg.com/purecss@1.0.1/build/grids-responsive-min.css" />
</head>

<body>
<div class="pure-g">
    <div class="pure-u-sm-1-1 pure-lg-1-7 ">First Unit</div>
    <div class="pure-u-sm-1-1 pure-lg-1-7 ">First Unit</div>
    <div class="pure-u-sm-1-1 pure-lg-1-7 ">First Unit</div>
    <div class="pure-u-sm-1-1 pure-lg-1-7 ">First Unit</div>
    <div class="pure-u-sm-1-1 pure-lg-1-7">First Unit</div>
    <div class="pure-u-sm-1-1 pure-lg-1-7 ">First Unit</div> 
    <div class="pure-u-sm-1-1 pure-lg-1-7 ">First Unit</div>
</div>
</body>
</html>

我想要一个 7 列的网格。我可以使用 Purecss“pure-u-1-7”实现这一点。但是当与 sm、md、lg、xl 结合使用时，它就不起作用了。它成为一个专栏。我想要一个 7 列，当它在小型设备上查看时它应该变成单列。像这样“纯 u-1-7 纯 u-sm-1-1”

最佳答案

我在 Google Chrome 和 Firefox 上测试过，效果很好我希望这是你想要的

<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Your page title</title>
 <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.1.0/pure-min.css">
 </head>
 <body>
 <style>
    p {
        text-align:center;
    }
    #mainDiv{
        width:100%;
    }
    #subDiv1{
        width:85.7%;
    }
    #subDiv2{
        width:14.3%;
    }
 </style>
 <div class="pure-g" id="mainDiv">
     <div id="subDiv1" class="pure-u-1-2">
             <div class="pure-g">
                 <div class="pure-u-1-6 pure-u-sm-1-6 pure-u-md-1-6 pure-u-lg-1-6 pure-u-xl-1-6">
                    <p>test 1</p>
                 </div>
                 <div class="pure-u-1-6 pure-u-sm-1-6 pure-u-md-1-6 pure-u-lg-1-6 pure-u-xl-1-6">
                    <p>test 2</p>
                 </div>
                 <div class="pure-u-1-6 pure-u-sm-1-6 pure-u-md-1-6 pure-u-lg-1-6 pure-u-xl-1-6">
                    <p>test 3</p>
                 </div>
                 <div class="pure-u-1-6 pure-u-sm-1-6 pure-u-md-1-6 pure-u-lg-1-6 pure-u-xl-1-6">
                    <p>test 4</p>
                 </div>
                 <div class="pure-u-1-6 pure-u-sm-1-6 pure-u-md-1-6 pure-u-lg-1-6 pure-u-xl-1-6">
                    <p>test 5</p>
                 </div>
                 <div class="pure-u-1-6 pure-u-sm-1-6 pure-u-md-1-6 pure-u-lg-1-6 pure-u-xl-1-6">
                    <p>test 6</p>
                 </div>

            </div>
     </div>
         <div id="subDiv2" class="pure-u-1-2 ad">
            <p>test 7</p>
         </div>
 </div>
 </body>
 </html>

关于html - pure-u-1-7 与 sm、md、lg、xl 结合使用时不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58132828/

25

4

0

文章推荐： css - 将 CSS 变量转换为 SCSS 变量

文章推荐： javascript - 我想循环遍历数组并修改属性

文章推荐： javascript - 函数之前的 jQuery 选择器

文章推荐： html - 无法旋转 3d 立方体

Excel - 结合 SUMPRODUCT
我有一张 Excel 表格，用于更新玩家评分。播放器配售初始化 1 2 3 4 金融评级一个 1 2.0 1.000 0.018 0.016 0.014 2.007 D 2 -2.0 54.5
qt - 结合 QAbstractItemModels
我有一个 map = std::map ，其中 myItemModel继承QAbstractItemModel . 我现在要合并所有 myItemModel合一myItemModel (其他所有元素模
r - do.call 结合 "::"
我大量使用“do.call”来生成函数调用。例如: myfun <- "rnorm"; myargs <- list(n=10, mean=5); do.call(myfun, myargs); 但是
Scala future 结合
想象一下 InputStream 的以下变体: trait FutureInputStream { //read bytes asynchronously. Empty array means E
结合 C 和汇编代码
这是我的 C 代码: #include void sum(); int newAlphabet; int main(void) { sum();
Jquery:结合 "each"函数选择类后的所有内容
我只是想选择类“.last”之后的每个元素。 HTML: 1 2 Jquery
C# ？？结合？ : question
我正在为一个项目构建一个 XML 反序列化器，我经常遇到这种类型的代码情况: var myVariable = ParseNDecimal(xml.Element("myElement")) == n
SQLite:结合 OR 和 AND
这是来自 Selecting the highest salary 的继续问题假设有一个表 'wagetable' name lowhours highhours wage pri
c - 结合 if 语句来设置值限制
我正在为我的程序创建一个战舰程序；该程序运行良好，但我试图确保当用户将坐标超出范围时，程序会说他们输入的坐标不正确。这是代码: #include #include void
结合 GetLastError 的值和自定义错误消息
我有一个函数，它为每种情况返回不同的 DWORD 值，如果出现错误。所以我有以下定义: #define ERR_NO_DB_CONNECTION 0x90000 #define ERR_DB_N
结合.net框架在C#派生类中触发基类事件及实现接口事件
在派生类中引发基类事件以下简单示例演示了在基类中声明可从派生类引发的事件的标准方法。此模式广泛应用于 .NET Framework 类库中的 Windows 窗体类。在创建可用作其他类的基类的类时，应
perl 结合 map 和每个
我只是想知道这是否可能: use Modern::Perl; my @list = ('a' .. 'j'); map { func($_) } each(@list); sub func { m
excel - 结合 IF 函数和 OR 函数以允许多个条件
我一直在使用 =IF(L2="","Active",IF(K2I2,"Late"))) 有效，但现在我需要检查 F 上的多个条件专栏我试过了 OR 函数 =IF(OR(F2="Scheduled"
FFmpeg - 结合 2 个命令
我有 2 个命令，如下所示。在视频中添加介绍图片 ffmpeg -y -loop 1 -framerate 10 -t 3 -i intro.png -i video.mp4 -filter_com
vba - 结合 VBA 和公式来检查独特的输出
好的，我有这个公式可以根据名字和姓氏列表生成用户名。现在，虽然这可行，但我希望单元格改为引用我自己的 VBA 函数。但是，由于代码少得多，我仍然想使用原始公式。我有这个公式: =SUBSTITUTE
haproxy - 结合 HAProxy 统计数据？
我有两个 HAProxy 实例。两个实例都启用了统计信息并且工作正常。我正在尝试将两个实例的统计信息合并为一个，以便我可以使用单个 HAProxy 来查看前端/后端统计信息。我试图让两个 hapro
typescript - switchMap 结合 mergeMap
我有一个 Observable，其中每个新值都应该引起一个 HTTP 请求。在客户端，我只关心最新的响应值；但是，我希望每个请求都能完成以进行监控/等。目的。我目前拥有的是这样的: function
javascript - 如何将延迟加载与 TinyMCE 结合？
我的网站上有 TinyMCE 插件。在 TinyMCE 插件的 textarea 中添加图像时，我希望这些图像包含延迟加载。我网站的缩略图具有特定类型的延迟加载，其中 src 图像是灰色背景。根据用户
r - 将重叠间隔与 lubridate 结合
我希望合并润滑间隔，以便如果它们重叠，则从内部第一个时间获取最小值和从内部最后一个时间获取最大值并总结以创建一个跨越整个时间段的新间隔。这是一个reprex: library(lubridate, w
html - 结合 flex 和绝对定位时的混淆
我有一个应用程序，它本质上是一个页眉、主要内容和一个始终可见的页脚。页脚可以改变大小，我想在页脚上方的主内容面板上放置一些工具。主要布局是用 flex 完成的，我阅读文档的理解是绝对定位通过相对于最近

首页

博学

6Ren·AI

商城

html - pure-u-1-7 与 sm、md、lg、xl 结合使用时不起作用