html - 定位列表项

Question

好的，我有这个小提琴http://jsfiddle.net/25J3M/6/，我想像黑色和蓝色的一样定位红色和黄色的块，黑色下方的红色和蓝色下方的黄色

<ul class="tracks">
    <li class="bateria"></li>
    <li class="waveform-bateria"></li>
    <li class="guitarra"></li>
    <li class="waveform-guitarra"></li>
</ul>​

/* track */

ul .tracks {
    float:left;
    margin-top:20px;
    left:0px;
    list-style-type:none;    
}

ul.tracks li.bateria {
    width:348px;
    height:279px;
    background-color:black;
    margin-right:0;
    float:left;
}

ul.tracks .waveform-bateria {
    width:678px;
    height:278px;
    background-color:blue;
    margin-right:0;
    float:left;    
    clear:right;
}

ul.tracks li.guitarra {
    width:348px;
    height:279px;
    background-color:red;
    margin-right:0;
    float:left;
}


ul.tracks .waveform-guitarra {
    width:678px;
    height:278px;
    background-color:yellow;
    margin-right:0;
    float:left;    
}

Answer 1

您应该使它们都具有相同的高度（它们的高度.waveform-*短一个像素）。另外，删除margin-topfrom .guitarra（仅在您的 jsfiddle 上，不在您发布的代码上）。

最后，请记住，只有当用户的浏览器窗口的宽度至少有 1026px 可用时，这种布局才有效，否则.waveform-*会中断到下一行。

http://jsfiddle.net/25J3M/14/