文章/答案/技术大牛

发布

社区首页 >问答首页 >css-grid以行而不是列的形式呈现div

问css-grid以行而不是列的形式呈现div
EN

Stack Overflow用户

提问于 2019-05-11 00:56:43

回答 1查看 169关注 0票数 0

我不明白为什么要在下面渲染(Create|Solve|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>

html

css

css-grid

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-05-11 02:29:42

您忘记关闭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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/56081898

复制

相似问题

问css-grid以行而不是列的形式呈现div
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问css-grid以行而不是列的形式呈现divEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问css-grid以行而不是列的形式呈现div
EN