5

3 つ<div>の s があり、2 番目の s を上に移動したいと考えています。

現在、私はこれを行っていますposition: relative; top: -20px;- それはかなりうまくいきます。

<div>唯一の欠点は、2 番目と 3 番目<div>(2 番目の div の下) の間に (20 ピクセルの) ギャップがあることです。

したがって、3 つの div すべての周囲に境界線を維持したいのでtop: -20px、3 行目の代わりにはなりません。

これをここに示します：http://jsfiddle.net/w2PGF/1/

私のマークアップ:

<div id="border">
    <div class="firstRow">foo</div>
    <div class="secondRow">bar</div>
    <div class="thirdRow">foobar</div>
</div>​

私のCSS：

#border {
    border: 5px solid #000;
}
.firstRow {
    background-color: cyan;
    border: 3px solid red;
    height: 50px;
}
.secondRow {
    position: relative;
    top: -20px;
    border: 3px solid yellow;
    background-color: grey;
    height: 50px;
}
.thirdRow {
    background-color: blue;
    border: 3px solid blue;
    height: 50px;
}

前もって感謝します。</p>

4

3 に答える 3

3 
.secondRow { margin-bottom: -20px }
于 2012-08-04T13:43:47.363 に答える
3

を削除しposition: relative、代わりにtop: -20px追加する必要がありますmargin-top: -20px

そのように：フィドル

于 2012-08-04T13:48:20.227 に答える
1

top: -20pxを削除して追加margin-top: -20pxする必要があります.secondRow

したがって.secondRow、次のようになります。

secondRow {
    margin-top: -20px;
    border: 3px solid yellow;
    background-color: grey;
    height: 50px;
}

この JSFiddle を確認してください: http://jsfiddle.net/w2PGF/6/

于 2012-08-04T13:48:18.800 に答える