gpt4 book ai didi

html - 带有整体边框的居中 div

转载 作者:行者123 更新时间:2023-11-28 17:11:52 24 4
gpt4 key购买 nike

看看这个 fiddle :https://jsfiddle.net/hkbynkmf/1/

如何让绿色边框围绕所有 div,而不让 div“溢出”边框?上面的div可以,但是下面的不行。另外,我需要 div 之间有一些距离;

我知道填充和边距是透明的,所以我选择了(绿色)边框来说明我的观点。最后,许可应该是透明的。

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>

最佳答案

您正在使用 top 属性将您的介绍 div 向下移动 15 像素,在标题下方。这导致 15px 与容器重叠。以这种方式定位元素时,您应该考虑使用 margin 来应用更改,而不是 toprightbottom 的定位属性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

关于html - 带有整体边框的居中 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45389027/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com