定位列表项

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-*的高度是一个像素较短）。此外，从.guitarra（这只在你的jsfiddle上，而不是在你发布的代码上）删除margin-top。

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

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