如何在列布局css上扩展背景色

时间:2018-09-23 18:55:35

标签: html css

我似乎很难扩展2列布局的背景色。用户可以添加类别,因此背景颜色必须能够根据用户要添加的类别数量进行调整。

enter image description here

html文件:

 {% for category in categories %}
    <div class="row__2 sub-pages--background">
      <div class="sub-pages--categories-background">
        <div class="sub-pages--categories">
            <a href="{% url 'blogging_logs:topics' category.id %}" class="sub-pages--categories-position ">{{ category }}
              <img  class="sub-pages--img" src="{{ category.category_image.url }}">
            </a>
        </div>
      </div>
    </div>
  {% empty %}
    <p>No categories entered yet.</p>
  {% endfor %}

css文件:

&--background {
  background-color: $mainBackground;
  padding-bottom: 2rem;
}

我觉得这与格式化div的方式有关

1 个答案:

答案 0 :(得分:3)

由于您在注释中提到您正在使用浮点数,因此只需添加一个具有背景的父元素,然后在其末尾添加一个clearfix

HTML:

<div class="parent--background">
 {% for category in categories %}
    <div class="row__2 sub-pages--background">
      <div class="sub-pages--categories-background">
        <div class="sub-pages--categories">
            <a href="{% url 'blogging_logs:topics' category.id %}" class="sub-pages--categories-position ">{{ category }}
              <img  class="sub-pages--img" src="{{ category.category_image.url }}">
            </a>
        </div>
      </div>
    </div>
  {% empty %}
    <p>No categories entered yet.</p>
  {% endfor %}
  <div class="clearfix"></div>
</div>

CSS:

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}