避免浮动文本环绕

Question

我正在努力实现以下目标：

我的代码如下：

HTML

<li class="bingo-offer">
                <ul>
                    <li class="bingo-offer-image"><img src="../img/winkbingo-146.png" alt=""></li>
                    <li><h3>Wink Bingo</h3></li>
                    <li>Free Cash: <span>£20</span></li>
                    <li>Join one of the biggest Bingo sites on the Internet and enjoy a whopping £20 bonus when you deposit £5!</li>
                    <li><a href="#" class="play-btn">Play Now</a></li>
                    <li><a href="#" class="read-more">read more</a></li>
                </ul>
            </li>

CSS

.bingo-offer {
    float: left;
    background: #fff;
    width: 300px;
    margin-right: 20px;
    margin-bottom: 20px;
}
    .bingo-offer ul {
        margin: 0;
        padding: 10px;
    }
        .bingo-offer ul li.bingo-offer-image {
            float: left;
            margin-right: 10px;
        }
            .bingo-offer ul li.bingo-offer-image img {
                display: block;
            }
            .bingo-offer ul li .play-btn {
                background: url('../img/play-button.png') top left no-repeat;
                text-indent: 100%;
                white-space: nowrap;
                display: block;
                overflow: hidden;
                width: 68px;
                height: 24px;
            }
            .bingo-offer ul li a.read-more {
                color: #ee00f7;
                border-bottom: dotted 1px #f45ffa;
                font-size: 11px;
            }
        .bingo-offer ul li h3 {
            margin: 0;
            padding: 0;
            color: #ee00f7;
            font-size: 17px;
        }

我有类似的东西，但是当文本长度超出图像的高度时，右边的整个文本会环绕图像。我怎么能阻止这个？如果可能的话，我不想包含任何非语义代码。

目前我正在浮动图像。