Clearfix взломать, не заключая внутренние div с границами

Question

Я попытался использовать класс Clearfix, чтобы родительский div мог инкапсулировать все мои внутренние div. Я использую цикл for в языке шаблонов Django для визуализации отдельных твитов с некоторой информацией анализа настроений (свернутой с помощью тега "details"). Я бы хотел, чтобы родительский div заключал в себе все эти твиты, чтобы страница не стала очень длинной и неприглядной. Мне бы хотелось, чтобы во внешнем div была полоса прокрутки, чтобы вы могли легко и быстро прокручивать все твиты. Я попытался использовать предложенный ниже код, но получаю тот же результат - родительский div (обозначенный черной рамкой) окружает только первый внутренний твит div. Я также попробовал 'переполнение: скрытый;' для родительского div, безрезультатно. Буду признателен за любую помощь или предложения. Также, тестирование на Chrome.

Это мой класс CSS для clearfix:

    .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 */

Это релевантная часть моей страницы results.html с использованием языка шаблонов Django.

<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

Вам не нужно ясное решение здесь. Исправьте вложение со своей разметкой, и проблемы рендеринга должны исчезнуть:

{% 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 %}