试图在div上设置虚假高度

Question

我正试图解决这个难题 - 但没有成功。

图像代表产品列表。列表中的前3项是实际产品 - 白色边框是A元素，红色是IMG元素。

每个A元素都被LI元素包围，如下所示。

每个A的宽度受到LI的约束 - 而且LI的父级是流动的，所以它都以百分比形式完成。

我想在最后创建一个虚假元素，而不是产品图片，它将包含效果文本＆＃34;探索（n）收藏夹＆＃34;。设置宽度不是问题，但由于布局的流动性，我在设置确切高度时遇到了问题。

关于如何处理此问题的任何想法？

所有建议均已指定。

    <ul>
    <li>
        <a><img /></a>
    </li>
    <li>
        <a><img /></a>
    </li>
    <li>
        <a><img /></a>
    </li>
        <li>
        <a>this is not a product</a>
    </li>
</ul>

.favourites-widget ul
{
}

.favourites-widget li
{
    .BoxSizing;
    float:left;
    margin-bottom:1rem;
    padding-right:0.5rem;
    width:50%;
}

.favourites-widget li:nth-child(even)
{
    float:right;
    padding:0 0 0 0.5rem;
}

.favourites-widget li a
{
    display:block;
}