html - ul li上半部的长文本中断

当我的li的高度由于标题的2行文本而增加时，应在列表项右下方显示的li被推到右侧，在我的图像中有2个连续的2个文本的列表项，这就是为什么我的列表项位于下一行在2个列表项之后右移。向右推的第6个图像的类别为“ tibox-6”，其他的类别为“ tibox”

我的CSS

.tibox{
    float:left;
}
.tibox-6{
    clear:left;
    float:left;
}

我的HTML

<ul class="movies">
    <li class="tibox">
        <a class="timovie_image" href="new-image-wrestling/"
            title="Permalink to New Image wrestling">
        <img width="166" height="250" src="15-166x250.jpg" class="attachment-166x250 wp-post-image" alt="1" />
        </a>
        <div class="timovie_desc">
            <div><a class="timovie_link" href="new-image-wrestling/">New Image wrestling</a></div>
            <div class="timovie_year">2014</div>
            <div class="timovie_rating"><img src="image1.png" /> 6.4 - <img src="image2.png" /> 50%</div>
        </div>

    </li>
    <li class="tibox">
        <a class="timovie_image" href="new-image-pakistani/"
            title="Permalink to New Image pakistani">
        <img width="166" height="250" src="15-166x250.jpg" class="attachment-166x250 wp-post-image" alt="1" />
        </a>
        <div class="timovie_desc">
            <div><a class="timovie_link" href="new-image-pakistani/">New Image pakistani</a></div>
            <div class="timovie_year">2014</div>
            <div class="timovie_rating"><img src="image1.png" /> 6.4 - <img src="image2.png" /> 50%</div>
        </div>

    </li>
    <li class="tibox">
        <a class="timovie_image" href="new-image-1-8/"
            title="Permalink to New Image 1 sad sad asd as dsad">
        <img width="166" height="250" src="15-166x250.jpg" class="attachment-166x250 wp-post-image" alt="1" />
        </a>
        <div class="timovie_desc">
            <div><a class="timovie_link" href="new-image-1-8/">New Image 1 sad sad asd as dsad</a></div>
            <div class="timovie_year">2014</div>
            <div class="timovie_rating"><img src="image1.png" /> 6.4 - <img src="image2.png" /> 50%</div>
        </div>

    </li>
    <li class="tibox">
        <a class="timovie_image" href="new-image-1-9/"
            title="Permalink to New Image 1">
        <img width="166" height="250" src="15-166x250.jpg" class="attachment-166x250 wp-post-image" alt="1" />
        </a>
        <div class="timovie_desc">
            <div><a class="timovie_link" href="new-image-1-9/">New Image 1</a></div>
            <div class="timovie_year">2014</div>
            <div class="timovie_rating"><img src="image1.png" /> 6.4 - <img src="image2.png" /> 50%</div>
        </div>

    </li>
    <li class="tibox">
        <a class="timovie_image" href="new-image-1-10/"
            title="Permalink to New Image 1">
        <img width="166" height="250" src="15-166x250.jpg" class="attachment-166x250 wp-post-image" alt="1" />
        </a>
        <div class="timovie_desc">
            <div><a class="timovie_link" href="new-image-1-10/">New Image 1</a></div>
            <div class="timovie_year">2014</div>
            <div class="timovie_rating"><img src="image1.png" /> 6.4 - <img src="image2.png" /> 50%</div>
        </div>

    </li>
    <li class="tibox">
        <a class="timovie_image" href="new-image-1-11/"
            title="Permalink to New Image 2">
        <img width="166" height="250" src="15-166x250.jpg" class="attachment-166x250 wp-post-image" alt="1" />
        </a>
        <div class="timovie_desc">
            <div><a class="timovie_link" href="new-image-1-11/">New Image 2</a></div>
            <div class="timovie_year">2014</div>
            <div class="timovie_rating"><img src="image1.png" /> 6.4 - <img src="image2.png" /> 50%</div>
        </div>

    </li>
    <li class="tibox-6">
        <a class="timovie_image" href="new-image-1-12/"
            title="Permalink to New Image 1">
        <img width="166" height="250" src="15-166x250.jpg" class="attachment-166x250 wp-post-image" alt="1" />
        </a>
        <div class="timovie_desc">
            <div><a class="timovie_link" href="new-image-1-12/">New Image 1</a></div>
            <div class="timovie_year">2014</div>
            <div class="timovie_rating"><img src="image1.png" /> 6.4 - <img src="image2.png" /> 50%</div>
        </div>

    </li>
</ul>

图像链接网页http://i.stack.imgur.com/ctjq6.png

最佳答案

您可以使用display: inline-block代替浮点数：

.tibox {
    display: inline-block;
    vertical-align: top;
}

我不确定如何将每六个元素移到下一行。您可以尝试仅用tibox-6替换每个tibox并设置父ul元素的宽度。