-1

Boa noite(ou bom dia/boa tarde).

Eu possuo uma dúvida a respeito de posição dentro do layout. No primeiro código que eu tinha feito as postagens estavam todas de um único lado só que eu queria elas de 2 em 2 colunas então fiz esse:

Como está aparecendo:

inserir a descrição da imagem aqui

Código:

{% extends 'index.html' %}
{% block content %}

{% for postagens in postagens %}
{{forloop.counter}}
<div class='car'>
    {% if forloop.counter|divisibleby:2 %}
    <div class='esquer'>
        <div class='episodi'> 
            <div class='imag'>
            </div>
            <div class='titu'>
            <h2> {{ postagens.title }} </h2>
              <br/>
            <p> {{ postagens.resumo }} </p>
              <br/>
            <span class='date'> {{ postagens.created_at }} </span>
              <br/>
              <botton><a href='#'> Leia mais </a></botton>
            </div>
        </div>
    </div>
    {% else %}
    <div class='la'>
        <div class='episodi'> 
            <div class='image'>
            </div>
            <div class='titu'>
            <h2> {{ postagens.title }} </h2>
              <br/>
            <p> {{ postagens.resumo }} </p>
              <br/>
            <span class='date'> {{ postagens.created_at }} </span>
              <br/>
              <botton><a href='#'> Leia mais </a></botton>
            </div>
        </div>
    </div>
    </div>
{% endif %}
{% endfor  %}
<style>

.car {
    background-image: url();
    width: 100%;
    height: auto;
    overflow: hidden;
    display: inline-block;
    white-space: nowrap;
    margin-top:0px;
}

.esquer {
    float: left;
    width: 50%;
}

.la {
    float: left;
    width: 50%;
}

.episodi {
    display: grid;
    margin: 20px 20px;
    grid-template-columns: 300px 200px;
    grid-template-rows: 200px 10px 5px;
    grid-template-areas: &quot;imagem&quot; &quot;texto&quot;;
    border-radius: 18px;
    background: #fff;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.9);
    text-align: center;
    margin-right: 20px;
}

.imag {
    grid-area: imagem;
    background: url(https://1.bp.blogspot.com/-ed1VtnBlsmQ/Xxy2KcZ_3bI/AAAAAAAARA8/O8P_KDMTK5oebpSEOAxaTa_XQyueUCN5ACNcBGAsYHQ/s320/kong2.png);
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    background-size: cover;
}

.episod p {
    grid-area: texto;
    margin: 25px;
}

.image {
    grid-area: imagem;
    background: url(https://1.bp.blogspot.com/-jhUWXnvjq0M/Xxy8NLFL59I/AAAAAAAARBI/vX_eaqeoebAmF7IwIbPvsUpPXZidv5sSACNcBGAsYHQ/s320/Fallout-4-4K-Main.jpg);
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    background-size: cover;
}
  

</style>

{% endblock %}

Porém existe um problema, nem todas as postagens estão aparecendo e confesso que estou já um tempinho agarrado nisso. Pensei em tentar até fazer um "cycle" só que não tenho tanta familiaridade. Estou começando com Django agorinha.

Alguém poderia me ajudar a resolver esse problema? Todas as postagens feitas entrarem em duas colunas.

1 Resposta 1

0

você está com problema de layout nesse caso das colunas, já para trazer todas as postagens: post.objects.all() para funções usando Class-based views

class Posts(ListView): model = Post

{% for postagem in object_list %}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .