我使用响应式网格系统中的normalize.css和grid.css。在下面的例子中,在div类行下有一个名为project-box的div类。任何人都知道为什么项目框边框不包围两列?为什么它只在顶部显示边框?请解释和帮助!谢谢!!
.row {
border: 1px solid black;
max-width: 1140px;
margin: 0 auto;
}
.project-box {
border: 1px solid red;
}

<div class="row">
<div class="project-box">
<div class="col span-1-of-2">
<p>Hello</p>
</div>
<div class="col span-1-of-2">
<p>Hi there</p>
</div>
</div>
</div>
&#13;
答案 0 :(得分:0)
我不知道grid.css库,但我猜“col span-1-of-2”不知何故意味着50%
这是我尝试并正常工作的代码:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<style href='https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.css'></style>
<style>
.row{
border : 1px solid black;
max-width : 1140px;
margin : 0 auto;}
.project-box{
border : 1px solid red;
/* I just added "display: flex;" */
display : flex;}
/* WITH THE FOLLOWING RULE I TRY TO EMULATE GRID.CSS */
.col{width : 50%;}
</style>
</head>
<body>
<div class='row'>
<div class='project-box'>
<div class='col span-1-of-2'>
<p>Helo</p>
</div>
<div class='col span-1-of-2'>
<p>Hi there</p>
</div>
</div>
</div>
</body>
</html>