5

我有三个<div>s，想把第二个上移。

目前我正在这样做position: relative; top: -20px;- 效果很好。

<div>唯一的缺点是：第二个和第三个<div>（在第二个 div 下）之间有一个间隙（20px ）。

所以，我想保留所有三个 div 的边界，所以这top: -20px不是第三行的替代方案。

我在这里说明了这一点：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: relativeand 而不是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 回答