列在彼此下方

Question

我不明白为什么我的 col4 在彼此下方，而不是连续排列。 Sec 1 和 Sec 2 应该并排放置。我试图在我的 css 中定义我所有的列宽度。我在这里错过了什么？

HTML

<!DOCTYPE html>
<html>
<head>
    <title>| Fishing |</title>
    <link type="text/css" rel="stylesheet" href="css/build.css"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
    <div class="main-header" role="main">

    </div>
    <div class="row">
        <div class="col12">
            <h2>Report</h2>
        </div>
    </div>
    <div class="row" role="section">
        <div class="col4">
            <h4>Sec 1</h4>
        </div>
        <div class="col4" role="section">
            <h4>Sec 2</h4>
        </div>
    </div>

</body>
</html>

CSS

html, body {
        margin: 0px;
        padding: 0px;
        font-size: 40px;
    }

    .main-header {
        background: url(../img/bg.jpg) no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        height: 500px;
        margin-bottom: 20px;
        overflow: hidden;
    }

    /* Rows */
    .row{
      margin-left:-15px;
      margin-right:-15px;
     }
    .row{:after{
      content:'';
      display:block;
      clear:both
    }
    /* General properties of columns */
    .col{
      padding: 0rem;
      float:left; 
    }

    /* Column Definition */
    .col1{
      width:8.33333333%
    }

    .col2{
      width:16.66666667%
    }

    .col3{
      width:25%
    }

    .col4{
      width:33.33333333%
    }

    .col5{
      width:14.666667%
    }

    .col6{
      width:50%;
    }

    .col7{
      width:58.33333333%
    }

    .col8{
      width:66.6666667%
    }

    .col9{
      width:75%
    }

    .col10{
      width:83.33333333%
    }

    .col11{
      width:91.6666666%
    }
    .col12{
      width:100%;
    }

Answer 1

首先，你有一个语法错误：

.row{:after{
  content:'';
  display:block;
  clear:both
}

应该是：

.row:after{
  content:'';
  display:block;
  clear:both
}

此外，您为 .col 定义了样式，但它们不会应用于列，因为它们需要 col class 添加到 [=15] =] classes，例如：

<div class="col col4">
     <h4>Sec 1</h4>
</div>

列在彼此下方

column is below eachother

html

css

responsive