1

ボックスを上下に再配置できないという問題があり、それらの間に距離があります。助けていただけますか。ボックスにはギャップがあり、私のように上下に並んでいるのではなく、1 つの行に配置されていることを意味します。

time, .time {
    font-size: 10px;
    color:gray;
    border-bottom: 1px solid #E7EBF2;
    min-width:350px;
    height:20px;
    padding-bottom: 5px;
}
#timeline {
    width:846px;
    list-style:none;
    list-style-type: none;
    background: url('../imgs/timeline.png') top center repeat-y;
    margin: 0 auto;
    padding:20px;
    margin-bottom:10px;
}
#timeline li {
    width:390px;
    -moz-border-radius:2px;
    border-radius:2px;
    webkit-border-radius:2px;
    border:1px solid #c3ccdf;
    padding:5px;
    background-color:#FFF;
}
#timeline li:nth-of-type(odd) {
    clear: both;
    float:right;
}
#timeline li:nth-of-type(odd), #timeline li:nth-of-type(even) {
    margin:-10px 0 20px 0;
}
#timeline li:nth-of-type(even) .corner {
    position:absolute;
    display:block;
    margin-left:383px;
    width:20px;
    height:15px;
    background:url('../imgs/right.png');
}
#timeline li:nth-of-type(odd) .corner {
    position:absolute;
    display:block;
    margin-left:-25px;
    width:20px;
    height:15px;
    background:url('../imgs/left.png');
}

ここにデモがあります http://jsfiddle.net/jT5e9/1/

4

1 に答える 1

0

それはあなたがclear: both;ここにいたからです：

#timeline li:nth-of-type(odd) {
    clear: both;
    float:right;
}

さらに、追加float:leftしましたが#timeline li、うまくいきました。 http://jsfiddle.net/jT5e9/2/

于 2013-08-12T15:54:37.877 に答える