与整体边框

-1

中心的div看看这个小提琴：https://jsfiddle.net/hkbynkmf/1/与整体边框

如何让绿色边框四处流动所有的div，无格“溢出”的边界？上面的div是可以的，但是较低的不是。另外，我需要一些divs之间的距离;

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

HTML：

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 */ 
 
}

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

来源

2017-07-29 user2286339

加上'填充底：15px的;'body元素 – bhv

您使用的是top属性将你介绍div 15px的回落，标题下方。这导致与容器重叠15px。以这种方式定位项目时，应考虑使用margin来应用更改，而不是定位属性top，right，bottom或left。

你有很多与你的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

来源

2017-07-29 12:18:40 PTD

谢谢你 - 我试图绕过第二的重叠通过分配“相对”身体和divs的posisition;显然不正确。 – user2286339

在你的代码中，#intro位于#header低于15像素。这样做在身体上没有留下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 */ 
}

来源

2017-07-29 12:12:47

使用的#intro格边距顶级物业将允许绿色边框流动，同时也有在divs之间的空间。这里是小提琴： 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 */ 
}

来源

2017-07-29 12:13:58

回答

相关问题