HTML和CSS,边框不包围col

时间:2018-04-07 01:41:35

标签: html css

我使用响应式网格系统中的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;
&#13;
&#13;

1 个答案:

答案 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>