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

Question

我已经尝试使用 Clearfix 类来启用父 div 来封装我所有的内部 div。我在 Django 模板语言中使用 for 循环来呈现带有一些情绪分析信息的个人推文(使用“详细信息”标签折叠)。我希望父 div 包含所有这些推文 div，这样页面就不会变得很长且难看。我希望外部 div 有一个滚动条，这样您就可以轻松地以合理、包含的方式滚动浏览所有推文。我已经尝试使用下面建议的代码，但我得到了相同的结果 - 父 div(由黑色边框表示)仅围绕第一个内部 tweet 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 %}