html – 如何在div标签之间建立垂直空间?

html – 如何在div标签之间建立垂直空间?,第1张

概述我有三个div标签,我想垂直地在div标签之间创建空间,并且还希望我的第一个div标签是固定标签. 当我将我的第一个div位置设置为非固定位置时,我可以创建垂直空间. <html><head><title>div</title></head><body style="margin: 0; padding: 0;"><div style="width:100%; background-co 我有三个div标签,我想垂直地在div标签之间创建空间,并且还希望我的第一个div标签是固定标签.

当我将我的第一个div位置设置为非固定位置时,我可以创建垂直空间.

<HTML><head><Title>div</Title></head><body ><div ><div >a</div><div >b</div><div >c</div>        </div></body></HTML>

当我将“div a”位置更改为固定时,“div a”和“div b”都从margin-top:2em下降.

<HTML><head><Title>div</Title></head><body ><div ><div >a</div><div >b</div><div >c</div>        </div></body></HTML>

请帮我把我的“div a”固定,并在“div a和b”之间留出空间.

解决方法 为了将div.a(固定的)保持在页面顶部,添加top:0;如果您希望它保持在其余内容之上,请包含z-index:2;.

为了在div.a和div.b之间添加间距,你必须在div.b周围放置一个容器div并对其进行适当的填充.如果你只是在主容器div上放填充它将偏移div.a.

如果可能的话,将最终高度设置为div.a而不是百分比,因为这将使div.b和它的容器的垂直对齐更容易.这样你可以将div.b的margin-top设置为div.a的高度.

以下是重构的CSS和HTML,以提高可读性:

/* CSS */* {  margin: 0;  padding: 0;}div {  wIDth: 100%;}div.container {  height: 100%;}div.container,div.b-container {  background-color: lime;}div.a {  height: 70px;  background-color: blue;  position: fixed;  top: 0;  z-index: 2;}div.b-container {  position: relative;  padding-top: 2em;  margin-top: 70px;}div.b-container div.b {  wIDth: 70%;  height: 100%;  background-color: gray;  margin: auto;    margin-bottom: 2em;}div.c {  height: 5%;  background-color: aqua;}
<!-- HTML --><div >  <div >    a  </div>  <div >    <div >b    </div>  </div>  <div >    c  </div></div>
总结

以上是内存溢出为你收集整理的html – 如何在div标签之间建立垂直空间?全部内容,希望文章能够帮你解决html – 如何在div标签之间建立垂直空间?所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/web/1069839.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-26
下一篇 2022-05-26

发表评论

登录后才能评论

评论列表(0条)

保存