当我将我的第一个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标签之间建立垂直空间?所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)