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

如果您知道自己总是连续3行，则可以使用清除

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

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

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

2 个答案: