與整體邊框

-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

回答

相關問題