css - HTML 列表项不从 float 内容继承高度

Question

我正在构建一个内容区域，该区域将位于文章页面的底部，其中包含前 10 个元素列表。列表项中的内容是带有标题的图像和一段文本。列表项背景将在白色和灰色之间交替。

Image 和 caption 需要向左浮动，所以我将它们包裹在一个名为 .col 的 div 中，并将 div 向左浮动。但是，无论我如何修改我的 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;
}

你可以看到一个working demo我的网络服务器上的页面。

Answer 1

您使用的 clearfix 略有错误(this one)。

你不这样做:

<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>