让 jinja 循环 div 垂直堆叠答案

【问题标题】：Getting jinja looped divs to stack vertically让 jinja 循环 div 垂直堆叠
【发布时间】：2020-02-13 18:41:17
【问题描述】：

我有一个 jinja 循环，我希望在每次迭代后（在 {{ detail[2] }} 之后）有一个分页符。但是由于某种原因，每个交互都不断堆叠在前一个交互的右侧。我尝试在循环中添加<br>，我创建了一个包装器div（commentwrap），我在CSS中添加了page-break-after: always和page-break-after: always......但我无法让它工作。

CSS

.fbpic {
  float:left;
}

.votecomment {
    float:left;
    background-color: #F5F5F5;
    padding: 13px;
    border: 1px;
    border-style: solid;
    border-color: #d9d9d9;
    border-radius:10px;
    margin-left: 10px;
    page-break-after: always;
}

.commentwrap {
}

HTML

<div class="commentloop">
{% for detail in vote_details %}
    <div class="commentwrap">
        <div class="fbpic">
            <img src="{{ detail[3] }}" style="width:40px;border-radius:50%;">
        </div>
        <div class="votecomment">
            <strong> {{ detail[0] }} </strong>&nbsp; <strong>Vote:</strong> {{ detail[1] }} &nbsp; <strong>Comments:</strong> {{ detail[2] }}<br>
        </div>
    </div>
    <br>
{% endfor %}
</div>

【问题讨论】：

标签： html css jinja2

【解决方案1】：

在我输入问题后才发现这一点 --- 原来 float:left; 搞砸了。我使用填充来获得我想要的效果。可能有更好的方法，但这很有效。

【讨论】：