Question

<!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”

Answer 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>

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

1 个答案: