3 

<!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 列，当它在小型设备上查看时，它应该变成单列。像这样“pure-u-1-7 Pure-u-sm-1-1”

4

1 回答 1

2

我在 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>
于 2019-09-27T12:16:15.750 回答