时间戳

首页 > 解决方案 > css-grid 在行而不是列中呈现 div

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

问题描述

在此处输入图像描述

我不明白为什么它在下面呈现而不是放在一边（创建|求解|Staticis div）。#left、#centre 和 #right div 应该在一行中，显示在彼此下方的 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>

标签： htmlcsscss-grid

解决方案

你忘了关闭一个 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>

推荐阅读