如何在浮动后开始一条新线:左边有不同的高度？

Question

我在jsfiddle上有这个代码.

如您所见,第3或第4 li项以新行开始(取决于您的窗口宽度).但由于高度不同,这条新生产线并未在生产线的起点开始.

如何在CSS新行中开始始终在行的开头？

<ul>
    <li>
        <div class="imgplace" style="height:200px;">here is an img in real</div>
        <input type="text" id="img_01" value="blahblah" />
        <div class="imgicon">i1</div>
        <div class="imgicon">i2</div>
        <div class="selector">
            <input type="radio"> check me now
        </div>
    </li>
    <li>
        <div class="imgplace" style="height:190px;">here is an img in real</div>
        <input type="text" id="img_02" value="blahblah" />
        <div class="imgicon">i1</div>
        <div class="imgicon">i2</div>
        <div class="selector">
            <input type="radio"> check me now
        </div>
    </li>
    <li>
        <div class="imgplace" style="height:180px;">here is an img in real</div>
        <input type="text" id="img_03" value="blahblah" />
        <div class="imgicon">i1</div>
        <div class="imgicon">i2</div>
        <div class="selector">
            <input type="radio"> check me now
        </div>
    </li>
    <li>
        <div class="imgplace" style="height:200px;">here is an img in real</div>
        <input type="text" id="img_04" value="blahblah" />
        <div class="imgicon">i1</div>
        <div class="imgicon">i2</div>
        <div class="selector">
            <input type="radio"> check me now
        </div>
    </li>
    <li>
        <div class="imgplace" style="height:200px;">here is an img in real</div>
        <input type="text" id="img_05" value="blahblah" />
        <div class="imgicon">i1</div>
        <div class="imgicon">i2</div>
        <div class="selector">
            <input type="radio"> check me now
        </div>
    </li>
    <li>
        <div class="imgplace" style="height: 150px;">here is an img in real</div>
        <input type="text" id="img_01" value="blahblah" />
        <div class="imgicon">i1</div>
        <div class="imgicon">i2</div>
        <div class="selector">
            <input type="radio"> check me now
        </div>
    </li>
</ul>

ul { width: 650px; }
li {
    display: block;
    width: 200px;
    float: left;
    margin: 2px;
}
.imgplace {
    width: 200px;
    background: #f00;
}
.imgicon {
    display: block;
    float: left;
    width: 16px;
    height: 16px;
}
}

Answer 1

只需删除float:left并添加display: inline-block并vertical-align: top更好地对齐它们(+1来自评论的Hashem)

尝试

li {
   display: inline-block;
   width: 200px;
   margin: 2px;
   vertical-align: top;
}

DEMO

Answer 2

当您知道总是三行时，可以使用clear

li:nth-child(3n+1) {
    clear: left;
}

http://jsfiddle.net/SLh49/5/