위치 목록 항목

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

높이가 모두 같아야합니다 (높이가 1 픽셀 더 작습니다). 또한 .guitarra에서 margin-top을 제거하십시오 (게시 한 코드가 아닌 jsfiddle에만 있음).

마지막으로,이 레이아웃은 사용자 브라우저 창 너비가 1026px 이상인 경우에만 작동합니다. 그렇지 않으면 .waveform-*이 다음 줄로 나뉩니다.

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