Question

我不明白为什么将其呈现在下面（创建|求解| Staticis div）。应该将＃left，＃centre和#right div放在同一行中，并显示在eatch other下面的3列中。

我该怎么做？谢谢你的帮助！这是我的代码：

body {
  font: Helvetica;
  padding: 50px;
}

#gridoutter {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 2fr 1fr;
  grid-auto-flow: column;
}

#gridoutter>div {
  background-color: orangered;
}

#gridinner>div {
  background-color: orange;
}

#gridinner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
}

<!DOCTYPE html>
<html>

<head>
  <title>{{ title }}</title>
  <link rel='stylesheet' href='/stylesheets/style.css' />
</head>

<body>
  <div id="gridoutter">
    <div id="header">
      HEADER
    </div>
    <div id="content">
      <div id="gridinner">
        <div id="left" class="partial">
          <h2>Create</h2>
          <p>Design your tests</p>
          <div id="centre" class="partial">
            <h2>Solve</h2>
            <p>Absolve your written tests</p>
          </div>
          <div id="right" class="partial">
            <h2>Statistcs</h2>
            <p>Track your progress</p>
          </div>
        </div>
      </div>
      <div id="footer">
        FOOTER
      </div>
    </div>
</body>

</html>

Answer 1

您忘了关闭div：

body {
  font: Helvetica;
  padding: 50px;
}

#gridoutter {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 2fr 1fr;
  grid-auto-flow: column;
}

#gridoutter>div {
  background-color: orangered;
}

#gridinner>div {
  background-color: orange;
}

#gridinner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
}

<!DOCTYPE html>
<html>

<head>
  <title>{{ title }}</title>
  <link rel='stylesheet' href='/stylesheets/style.css' />
</head>

<body>
  <div id="gridoutter">
    <div id="header">
      HEADER
    </div>
    
    <div id="content">
      <div id="gridinner">
        <div id="left" class="partial">
          <h2>Create</h2>
          <p>Design your tests</p>
        </div><!-- Didn't close this div -->
        
        <div id="centre" class="partial">
          <h2>Solve</h2>
          <p>Absolve your written tests</p>
        </div>
        
        <div id="right" class="partial">
          <h2>Statistcs</h2>
          <p>Track your progress</p>
        </div>
      </div>
    </div>

    <div id="footer">
      FOOTER
    </div>
  </div>
</body>

</html>

css-grid在行而不是列中呈现div

1 个答案: