rows/columns 不使用骨架 css

Question

我正在尝试使用 skeleton.css 在我的页面上获得三个部分（每个部分 1/3 长度）。该框架的网站是 skeleton。这是我的代码：

<!DOCTYPE html>

<html>

<head>
  <style type="text/css" href="css/normalize.css" rel="stylesheet"></style>
  <style type="text/css" href="css/skeleton.css" rel="stylesheet"></style>
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="three columns">
        1
      </div>
    </div>

    <div class="row">
      <div class="three columns">
        2
      </div>
    </div>

    <div class="row">
      <div class="three columns">
        3
      </div>
    </div>
  </div>
</body>

</html>

Answer 1

由于您希望列在第 3 列，请改用 one-third class 并将第二个 class 固定到 column 与 [=14] 的位置=].您还应该删除两个额外的 row 容器并将它们全部放在一个容器中：

.example-grid .column {
  background: #EEE;
  text-align: center;
  border-radius: 4px;
  font-size: 1rem;
  text-transform: uppercase;
  height: 30px;
  line-height: 30px;
  margin-bottom: .75rem;
  font-weight: 600;
  letter-spacing: .1rem;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet" />
<!DOCTYPE html>

<html>

<head>
  <style type="text/css" href="css/normalize.css" rel="stylesheet"></style>
  <style type="text/css" href="css/skeleton.css" rel="stylesheet"></style>
</head>

<body>
  <div class="container example-grid">
    <div class="row">
      <div class="one-third column">
        1
      </div>

      <div class="one-third column">
        2
      </div>

      <div class="one-third column">
        3
      </div>
    </div>
  </div>
</body>

</html>

rows/columns 不使用骨架 css

rows/columns not working with skeleton css

html

css

skeleton-css-boilerplate