html - 定位列表项

Question

好的，我有这个 fiddle http://jsfiddle.net/25J3M/6/ , 我想像黑色和蓝色 block 一样放置红色和黄色 block ，红色在黑色 block 下方，黄色在蓝色 block 下方

<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-* 的高度要短一个像素)。此外，从 .guitarra 中删除 margin-top(它仅在您的 jsfiddle 上，不在您发布的代码上)。

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

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