Question

看看这个小提琴：https://jsfiddle.net/hkbynkmf/1/

如何让绿色边框在所有div周围流动，没有div＆＃34;溢出＆＃34;边界？上面的div是好的，但是下面的不是。另外，我需要div之间的距离;

我知道填充和边距是透明的，所以我选择（绿色）边框来说明我的观点。最后，间隙应该是透明的。

HTML：

＆＃13;

body {
  position: relative;
  background-color: #ff0000;
  background-repeat: no-repeat;
  background-attachment: fixed;
  padding: 0px;
  border: 10px solid #190;
  margin: 0px; 
}

#header {
  position: relative;
  margin:0 auto;                 /* div will be     H-centered */
  top: 10px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  width: 960px;
  height: 250px;
  background-color: #DDDDDD;  
  overflow: hidden;              /* Keep all sub-elements inside this div */
}

#intro {
  position: relative;
  margin:0 auto;                 /* div will be H-centered */
  top: 15px;
  left: 0;
  bottom: 0px;
  right: 0px;
  width: 960px;
  height: 150px;
  background-color: blue;
  overflow: hidden;              /* Keep all sub-elements inside this div */
}

＆＃13;

<body>                        <!--position: relative;-->
    <div id="header">         <!--position: relative;-->            
    </div>
    <div id="intro">          <!--position: relative;-->            
    </div>
</body>

＆＃13;

Answer 1

您正在使用top属性将您的介绍div 15px向下移动到标题下方。这导致与容器的15px重叠。以这种方式定位项目时，您应该考虑使用margin来应用更改，而不是top，right，bottom或left的定位属性。< / p>

你的CSS经历了很多，这使得样式表变得比它需要的复杂得多。我按如下方式简化了CSS，以达到同样的效果：

body { 
    background-color: #ff0000;
    border: 10px solid #190;
    margin: 0px;
    padding: 0px;
}

a img {
    border:none;
}

#header {
    background-color: #DDDDDD;  
    height: 250px;
    margin:0 auto;
    overflow: hidden;
    width: 300px;
}

#intro {
    background-color: blue;
    height: 150px;
    margin:15px auto 0;
    overflow: hidden;
    width: 300px;
}

See updated fiddle

Answer 2

在您的代码中，#intro的位置比#header低15px。这样做不会留下身体中的div。

不确定您要使用position: relative;尝试实现的目标，但#intro可以写成

#intro
{   
    margin:10px auto;/* div will be H-centered */

    width: 300px;
    height: 150px;
    background-color: blue;
    overflow: hidden;/* Keep all sub-elements inside this div */
}

Answer 3

使用#intro div上的margin top属性将允许绿色边框流动，同时在div之间也有空格。这是小提琴： https://jsfiddle.net/hkbynkmf/17/

#intro
{
    position: relative;
    margin:15px auto 0px auto                               /* div will be H-centered */

    left: 0;
    bottom: 0px;
    right: 0px;

    width: 300px;
    height: 150px;
    background-color: blue;
    overflow: hidden;                                   /* Keep all sub-elements inside this div */
}

带有整体边框的居中div

3 个答案: