Django Шаблон полной ширины CSS

Question

Я хотел бы поместить все свои элементы категории рядом, но по какой-то причине я получаю два элемента рядом друг с другом, и после этого начинается новый ряд, а слева у меня все еще остается много места ...

CSS

.category {
    float: left;
    width: 40%;
    margin-right: 3.33333%;
    margin-bottom: 3.33333%;
    padding: 15px;
    text-align: center;
    box-sizing: border-box;
    background: radial-gradient(white, white, whitesmoke);
    border-radius: 3%;

}

.categorycover {
    height: 100px;
    -webkit-box-reflect: below 8px -webkit-gradient(linear, right top, right bottom, from(transparent), to(rgba(255, 255, 255, 0.2)));
}

шаблон

{% block content %}
    {% for category in object_list %}
        <div>
            <span class="category">
                <img class="categorycover" src="/media/{{ category.cover }}">
                <h1>{{ category.title }}</h1>
                <p>{{ category.post_set.count }}Posted element(s)</p>
                <p>{{ category.description|readmore:10|linebreaksbr}}</p>
            </span>
        </div>
    {% endfor %}
{% endblock %}

Должен ли я поместить контейнер div со 100% ширины страницы? Любая подсказка будет полезна.

Answer 1

Я мог бы предложить альтернативный подход. Используйте возможности Flexbox, чтобы красиво расположить элементы в ряд.

{% block content %}
    {% for category in object_list %}
        <div class="container">
            <span class="category">
                <img class="categorycover" src="/media/{{ category.cover }}">
                <h1>{{ category.title }}</h1>
                <p>{{ category.post_set.count }}Posted element(s)</p>
                <p>{{ category.description|readmore:10|linebreaksbr}}</p>
            </span>
        </div>
    {% endfor %}
{% endblock %}

Ваш стиль может выглядеть так:

.container{
display:flex;
flex-direction: row;
justify-content: space-around; #or space-evenly
}
.category{
    padding: 15px;
text-align: center;
box-sizing: border-box;
background: radial-gradient(white, white, whitesmoke);
border-radius: 3%;
}

Стили flexbox родительского контейнера позаботятся о выравнивании за вас, а также о расстоянии между полями. Это работает очень хорошо для выравнивания элементов в div по горизонтали или вертикали. В этой статье вы найдете дополнительные стили, с которыми вы можете поиграть: Полное руководство по Flexbox