html - ul li 在它的上 li 有长文本时中断

Question

当我的 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

Answer 1

你可以使用 display: inline-block 而不是 floats:

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

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