Html pure-u-1-7与sm、md、lg、xl组合时不工作
Html pure-u-1-7与sm、md、lg、xl组合时不工作,html,css,grid,pure-css,Html,Css,Grid,Pure Css,您的页面标题 第一单元 第一单元 第一单元 第一单元 第一单元 第一单元 第一单元 我在Google Chrome和Firefox上测试了它，效果很好，我希望这就是你想要的 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"
您的页面标题
第一单元
第一单元
第一单元
第一单元
第一单元
第一单元
第一单元
<!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>
您的页面标题
p{
文本对齐：居中；
}
#mainDiv{
宽度：100%；
}
#细分1{
宽度：85.7%；
}
#细分市场{
宽度：14.3%；
}
测试1
测试2
测试3
测试4
测试5
测试6
测试7