HTML-элементы списка, не наследующие высоту от плавающего содержимого

Question

Я создаю область контента, которая будет идти внизу страницы статьи, содержащей десятку лучших элементов. Содержимое в элементах списка представляет собой изображение с подписью и абзацем текста. Фон элемента списка будет чередоваться между белым и серым.

Изображение и подпись должны быть перемещены влево, поэтому я обернул их в div с именем .col и поместил их влево. Однако независимо от того, как я изменяю свой CSS, элементы списка не будут наследовать высоту .col с заголовком графической рекламы.

Я не могу сделать фиксированную высоту для элементов списка, потому что содержимое будет загружаться динамически и должно масштабироваться вместе с ним. Я чувствую, что перепробовал каждое изменение, чтобы заставить этого щенка работать, и ни одно из моих правок не потребовалось, поэтому я решил опубликовать здесь запрос некоторой помощи.

Мой HTML:

               <ul class="bestOf">
                    <li class="dark">
                        <div class="col">
                            <img src="../images/article/1.png" />
                            <p class="caption">Sinead O’Connor Gets Married gretvh in Pink Cadillac</p>
                        </div>
                        <p>2012 Ford Mustang Boss 302: A few mags have called it the best Mustang ever, and it’s hard to disagree. I know I’d choose this over a Shelby GT500, despite the latter’s more powerful engine. The Boss is a track car for the street, or a street car for the track. It doesn’t matter which. It behaves itself in traffic, turns into a beast when pushed, and has a glorious soundtrack. </p>
                    </li>
                    <div class="clearfix"></div>
                    <li class="light">
                        <div class="col">
                            <img src="../images/article/1.png" />
                            <p class="caption">Sinead O’Connor Gets Married gretvh in Pink Cadillac</p>
                        </div>
                        <p>2012 Ford Mustang Boss 302: A few mags have called it the best Mustang ever, and it’s hard to disagree. I know I’d choose this over a Shelby GT500, despite the latter’s more powerful engine. The Boss is a track car for the street, or a street car for the track. It doesn’t matter which. It behaves itself in traffic, turns into a beast when pushed, and has a glorious soundtrack. </p>
                    </li>
                    <div class="clearfix"></div>
                    <li class="dark">
                        <div class="col">
                            <img src="../images/article/1.png" />
                            <div class="clearfix"></div>
                            <p class="caption">Sinead O’Connor Gets Married gretvh in Pink Cadillac</p>
                        </div>
                        <p>2012 Ford Mustang Boss 302: A few mags have called it the best Mustang ever, and it’s hard to disagree. I know I’d choose this over a Shelby GT500, despite the latter’s more powerful engine. The Boss is a track car for the street, or a street car for the track. It doesn’t matter which. It behaves itself in traffic, turns into a beast when pushed, and has a glorious soundtrack. </p>
                    </li>
                </ul>
                <div class="hr"></div>

Мой CSS:

article ul.bestOf {
    display:block;
    position:relative;
    width:600px;
    height:auto;
}
article ul.bestOf li.light, article ul.bestOf li.dark {
    display:block;
    position:relative;
    width:600px;
    height:100%;
    padding:5px;
    margin:5px 0 5px -40px;
    border:1px solid #eee;  
}
article ul.bestOf li.light {
    background:fff;
}
article ul.bestOf li.dark {
    background:#eaeaea; 
}
article ul.bestOf .col {
    display:block;
    position:relative;
    width:200px;
    height:auto;
    float:left;
}
article ul.bestOf .col img {
    display:block;
    width:186px;
    height:124px;
    float:left; 
    padding:0 10px 0 0;
}
article ul.bestOf li .col .caption {
    display:block;
    position:relative;
    width:200px;
    height:auto;
}
article .bestOf li p {
    display:block;
    margin:3px 0 0 0;
}

Вы можете увидеть рабочую демонстрацию страницы на моем веб-сервере.

Answer 1

Вы используете неправильное исправление немного неправильно ( этот ).

Вы не делаете это:

<li class="element-that-i-want-to-contain-floats"></li>
<div class="clearfix"></div>

Вы делаете это вместо этого:

<li class="clearfix"></li>

Во избежание каких-либо сомнений ваш HTML должен выглядеть следующим образом:

<li class="clearfix dark"> .. </li>
<li class="clearfix light"> .. </li>
<li class="clearfix dark"> .. </li>

Answer 2

Вы можете просто добавить

.bestOf li{
overflow:hidden;
}

это также позволит вам удалить элементы clearfix!