CSS迫使下一个李？

Question

我有一个列表项列表，用于显示项目。我想知道如何使下一个列表项目显示在彼此之下而不是旁边。

编辑抱歉包含的代码。

<li class="project-item">
<div class="project-list-wrap">

    <div class="projectpicture" style="background-image: url();"></div>

    <h2 class="project-list-title">
        <a href="">yu mk</a>
    </h2>
    <div class="project-list-info">
        <span>Posted July 20, 2017</span>
        <span>0 Bids</span>
                    <span>$444.00</span>
    </div>
    <div class="project-list-desc">
        <p>asdfsd</p>
    </div>
    <div class="project-list-skill"><span class="fre-label"><a href="">Facebook</a></span></div>        <!-- <div class="project-list-bookmark">
        <a class="fre-bookmark" href="">Bookmark</a>
    </div> -->
</div>

和照片的CSS

.projectpicture {

    width: 360px;
    height: 224px;
    float: left;
    margin-right: 10px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
 }

其他

的CSS

.project-list-wrap {
    position: relative;
    padding-top: 30px;
    padding-bottom: 18px;
    border-bottom: 1px solid #ededed;
}

project-list-title {
    margin: 0;
    padding-right: 200px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5em;
}


.project-list-info {
    padding: 10px 0;
}

Answer 1

您需要清除列表项上的浮动。所以：

.project-item { clear: both; }