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-top移除.guitarra（仅在您的jsfiddle上，而不是在您发布的代码上）。

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

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

定位清单项目

1 个答案: