在 CSS 中卡在 'grid-template-columns'

Question

我目前正在学习 Django 并且卡住了。我在主容器内创建了 3 divs 并为主容器编写了这个 CSS 代码 ->

<style type="text/css">
    .home-container{
        display: grid;
        grid-template-columns: 1fr 3fr 1fr; 
    }
</style>

我已经创建了 grid-template-columns: 1fr 3fr 1fr;，但我没有得到第三个 div（即 1fr）的列。第三个 div 的内容低于第二个 div.

这是完整的源代码。 ->

<style type="text/css">
  .home-container {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
  }
</style>


<div class="home-container">
  <div>
    <h3>Browse Topics</h3>
    <hr>
    <a href="{% url 'home' %}">All</a> {% for topic in topics %}
    <div>
      <a href="{% url 'home' %}?q={{topic.name}} ">{{topic.name}}</a>
    </div>
    {% endfor %}
  </div>

  <div>
    {% if room_count != 0 %}
    <h5>{{room_count}} rooms available.</h5>
    {% else %}
    <h5>No rooms available.</h5>
    {% endif %}

    <a href="{% url 'create-room' %}">Create Room</a>

    <div>
      {% for room in rooms %}
      <div>
        {% if request.user == room.host %}
        <a href="{% url 'update-room' room.id %}">Edit this room</a>
        <a href="{% url 'delete-room' room.id %}">Delete this room</a> {% endif %}
      </div>
      <div>
        <span>@{{room.host.username}}</span>
        <h5>{{room.id}} -- <a href="{% url 'room' room.id %}">{{room.name}}</a></h5>
        <small>{{room.topic.name}}</small>
        <hr>
      </div>
      {% endfor %}
    </div>

    <div>
      <h3>Recent Activity</h3>
      <hr>
      <div>
        {% for message in messages %}

        <small>@{{ message.user }}   {{ message.created|timesince }} ago</small> {% endfor %}
      </div>
    </div>
  </div>

Answer 1

问题出在您的标记上，您忘记在第三部分之前关闭 div，导致只有两个 children of .home-container 和第二个 child 持有第 2 和第 3 部分：

<style type="text/css">
  .home-container {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
  }
</style>


<div class="home-container">
  <div>
    <h3>Browse Topics</h3>
    <hr>
    <a href="{% url 'home' %}">All</a> {% for topic in topics %}
    <div>
      <a href="{% url 'home' %}?q={{topic.name}} ">{{topic.name}}</a>
    </div>
    {% endfor %}
  </div>

  <div>
    {% if room_count != 0 %}
    <h5>{{room_count}} rooms available.</h5>
    {% else %}
    <h5>No rooms available.</h5>
    {% endif %}

    <a href="{% url 'create-room' %}">Create Room</a>

    <div>
      {% for room in rooms %}
      <div>
        {% if request.user == room.host %}
        <a href="{% url 'update-room' room.id %}">Edit this room</a>
        <a href="{% url 'delete-room' room.id %}">Delete this room</a> {% endif %}
      </div>
      <div>
        <span>@{{room.host.username}}</span>
        <h5>{{room.id}} -- <a href="{% url 'room' room.id %}">{{room.name}}</a></h5>
        <small>{{room.topic.name}}</small>
        <hr>
      </div>
      {% endfor %}
    </div>
  </div>
  <div>
    <h3>Recent Activity</h3>
    <hr>
    <div>
      {% for message in messages %}

      <small>@{{ message.user }}   {{ message.created|timesince }} ago</small> {% endfor %}
    </div>
  </div>
</div>

Answer 2

我认为这是由 non-closed <div> 标记在房间循环之前打开引起的。在 {% endfor %} 之后放置一个 </div>，您的网格模板应该可以正常工作。

在 CSS 中卡在 'grid-template-columns'

Got stuck in 'grid-template-columns' in CSS

css

django