Question

当我的李的高度由于标题的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代替浮点数：

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

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

当它的上层文字很长时，它就会破裂

1 个答案: