Question

我尝试使用Clearfix类来启用父div来封装我所有的内部div。我在Django模板语言中使用for循环来呈现具有一些情绪分析信息的单个推文（使用“details”标签折叠）。我希望父div包含所有这些推文div，以便页面不会变得非常长且不雅观。我希望外部div有一个滚动条，以便您可以以合理，包含的方式轻松滚动所有推文。我尝试使用下面建议的代码，但我得到相同的结果 - 父div（用黑色边框表示）只围绕第一个内部推文div。我也试过'溢出：隐藏;'对于父母div，无济于事。我将不胜感激任何帮助或建议。也可以在Chrome上进行测试。

这是我的clearfix的CSS类：

    .clearfix:after {
        content: "."; 
        display: block; 
        height: 0; 
        clear: both;
        font-size: 0;
        content: " "; 
        visibility: hidden;
        overflow: auto;
    }
    .clearfix {
        display: inline-block; 
        border: black 2px solid;
    }
    /* Hides from IE-mac \*/
    * html .clearfix {
        height: 1%;
    }
    .clearfix {
        display: block;
    }
    /* End hide from IE-mac */

这是使用Django模板语言的results.html页面的相关部分..

<div class="clearfix">

{% for tweet in tweets %}
<summary><h3 style="text-align:left">Tweet #{{ tweet.tweet_no }}</h3>
<div style="background-color: {{ tweet.tweet_color }}; border: #666699 dotted 6px; -moz-  border-radius: 15px; border-radius: 15px; margin: 5px;">
    <p>Tweet: {{ tweet.tweet_text_actual }}</p></summary><details>
    <p>Created at: {{ tweet.created_at }}</p>
    <p>Geo: {{ tweet.tweet_geo }}</p>
    <p>User: {{ tweet.tweeter }}</p>
    <p>Language: {{ tweet.tweet_lang }}</p>
    <p>Place: {{ tweet.tweet_place }}</p>
    <p>Predefined coordinates: {{ tweet.predefined_coors }}</p>
    <p>Sentiment score: <strong>{{ tweet.sentiment_score }}</strong></p>
    <p>Positive score: {{ tweet.pos_score }}</p>
    <p>Negative score: {{ tweet.neg_score }}</p>
    <p>Overall score: {{ tweet.overall_score }}</p>
    <p>Adjusted for exclamation marks? {{ tweet.adjustedExclamation }}</p>
    <p>Moderated by interrogatives present? {{ tweet.adjustedInterrogation }}</p>
    <p>Final processed word list:
    {% for item1, item2 in tweet.zipped_data %}
      ({{ item1 }} = {{ item2 }}),
    {% endfor %}
    </p>
    <p>print color: {{ tweet.tweet_color }}</p>
    <p>Dates: {{ tweet.date_format }}</p>

</details>
</div>
{% endfor %} 

</div>

Answer 1

这里你不需要一个clearfix解决方案。使用标记更正嵌套，渲染问题应该消失：

{% for tweet in tweets %}
<div style="background-color: {{ tweet.tweet_color }}; border: #666699 dotted 6px; -moz-  border-radius: 15px; border-radius: 15px; margin: 5px;">
    <summary>
        <h3 style="text-align:left">Tweet #{{ tweet.tweet_no }}</h3>        
        <p>Tweet: {{ tweet.tweet_text_actual }}</p>
    </summary>
    <details>
        <p>Created at: {{ tweet.created_at }}</p>
        <p>Geo: {{ tweet.tweet_geo }}</p>
        <p>User: {{ tweet.tweeter }}</p>
        <p>Language: {{ tweet.tweet_lang }}</p>
        <p>Place: {{ tweet.tweet_place }}</p>
        <p>Predefined coordinates: {{ tweet.predefined_coors }}</p>
        <p>Sentiment score: <strong>{{ tweet.sentiment_score }}</strong></p>
        <p>Positive score: {{ tweet.pos_score }}</p>
        <p>Negative score: {{ tweet.neg_score }}</p>
        <p>Overall score: {{ tweet.overall_score }}</p>
        <p>Adjusted for exclamation marks? {{ tweet.adjustedExclamation }}</p>
        <p>Moderated by interrogatives present? {{ tweet.adjustedInterrogation }}</p>
        <p>Final processed word list:
            {% for item1, item2 in tweet.zipped_data %}
                ({{ item1 }} = {{ item2 }}),
            {% endfor %}
        </p>
        <p>print color: {{ tweet.tweet_color }}</p>
        <p>Dates: {{ tweet.date_format }}</p>
    </details>
</div>
{% endfor %}

Clearfix hack不包含带边框的内部div

1 个答案: