CSS 使用在本地服务器上工作的 DIV 的网格在上传到 Django 站点时无法工作

Question

我正在尝试使用 DIV 创建一个 CSS 网格来显示一行 3 个框。

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    html { font-size: 22px; }
    body { 
      padding: 1rem; 
      background-color: rgba(2, 26, 63);
    
    }

    .card {
      background-color: rgba(24,109,238, 0.7);
      transition: 0.5s;
      border-radius: 10px;
      color: white;
      padding: 1rem;
      height: 4rem;
    }

    .card:hover{
    box-shadow: 0 0 20px 0px rgba(80, 230, 236, 0.8);
    }

    .card h3{
        text-align: center;
    }

    .cards {
      max-width: 800px;
      margin: 0 auto;
      display: grid;
      grid-gap: 1rem;
      font-size: small;
    }

    /* Screen larger than 600px? 2 column */
    @media (min-width: 600px) {
      .cards { grid-template-columns: repeat(2, 1fr); }
    }

    /* Screen larger than 900px? 3 columns */
    @media (min-width: 900px) {
      .cards { grid-template-columns: repeat(3, 1fr); }
    }
  </style>

</head>
<body>
    <Div class="cards">
        <Div class="card" onclick="window.location='opnotener'">
            <h3>NLP-NER 4 Op Notes</h3>
            <P>Natural Lanugage Processing - Named Entity Rrecognition tool for surgical Procedure Notes.</P>
        </Div>
        <Div class="card" onclick="window.location='#'">
            <h3>Surgical EPR</h3>
            <P>Surgical EPR that covers the entire surgical landscape with sub-speciality pipeleines.</P>
        </Div>
        <Div class="card" onclick="window.location='opnoteannotator'">
            <h3>Op Note Annotator</h3>
            <P>Surgical procedure notes Annotator with drag and drop speciality specific entities.</P>
        </Div>
    </Div>

</body>
</html>

预期的输出应该如下所示并在本地服务器上运行

Output on local server

但是当代码上传到托管站点 (Django v3.2) 时，我的输出看起来像这样；

Output on hosting site - Django v 3.2

Answer 1

我访问了你的页面。

将 grid-template-columns: auto auto auto; 添加到 .applications-wrap class 并将 height:auto 设置为 .applications-col class.

并且您的 .applications 部分不在中心，所以如果您想将其居中，请告诉我。

CSS 使用在本地服务器上工作的 DIV 的网格在上传到 Django 站点时无法工作

CSS grid using DIVs that works on local server not wotking when uploded to Django site

css

django

django-templates

css-grid