定位DIVS

时间:2013-04-29 10:39:20

标签: html layout position

我正在寻找一个在另一个之上的3个div,它们之间有一个小的差距。

<div style="position:absolute; border:2px solid #000; top:40px;  width:300px; height:100px"></div>

<div style="position:absolute; border:2px solid #000; top:150px; width:300px; height:300px"></div>

<div style="position:absolute; border:2px solid #000; top:460px; width:300px; height:100px"></div>

这样可行并且看起来不错,但是如果顶部或中间div的大小增加,那么它们可以与其他div重叠。

无论如何都要设置它,所以div 2总是与div 1相距10px,div 3总是距div 2 10px?

由于

1 个答案:

答案 0 :(得分:1)

在给定的三个div之间添加两个div。像这样。

<div style="position:relative; border:2px solid #000;  width:300px; height:100px"></div>
<div style="position:relative; padding-top: 10px;"></div>
<div style="position:relative; border:2px solid #000; width:300px; height:300px;"></div>
<div style="position:relative; padding-top: 10px;"></div>
<div style="position:relative; border:2px solid #000; width:300px; height:100px"></div>

Demo