0

わかりました、私はこのフィドルを持っています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;    
}
4

1 に答える 1

0

それらをすべて同じ高さにする必要があります（高さ.waveform-*は1ピクセル短くなります）。また、margin-topfromを削除.guitarraします（これはjsfiddleにのみあり、投稿したコードにはありません）。

最後に、このレイアウトは、ユーザーのブラウザウィンドウの幅が少なくとも1026ピクセルである場合にのみ機能することに注意してください。そうでない場合.waveform-*は、次の行に移動します。

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

于 2012-06-30T21:04:06.927 に答える