gpt4 book ai didi

HTML - 如何停止 div 重叠

转载 作者:太空宇宙 更新时间:2023-11-04 13:47:28 24 4
gpt4 key购买 nike

我有一个用作“侧面板”的 div,它具有宽度:100% 和位置:固定。这个侧面板包含我的导航。我还有另一个名为“content”的 div。它的宽度为 600 像素,我习惯使用“margin-left:auto, margin-right:auto”将其居中放置在侧面板和页面边缘之间。

但问题是这两个 div 是重叠的。我如何阻止它重叠?我在下面包含了 HTML 和 CSS 编码。

HTML

<body>
<div id="leftpanel">
<div id="nav">
<ul>
<li><a href="index.html">home</a></li>
<li><a href="">the future</a></li>
<li><a href="">contact details</a></li>
</ul>
</div>
</div>

<div id="content">
<div id="header">
<p><img src="images/haroon-ahmed.png" class="imgaligncentre"/></p>
</div>
</div>
</body>`

CSS

#leftpanel {
float:left;
height:100%;
width:320px;
postion:fixed;
}
#content {
width:600px;
padding-top:50px;
padding-bottom:50px;
margin-right:auto;
margin-left:auto;
}

最佳答案

这是阻止它们重叠的方法。

DEMO

#content {
margin-left: 320px;
}

当您使用position:fixed; 时,这意味着该元素不关心页面上的其他元素。它不在乎它是否在触摸它们,在它们上方,在它们下方。它只关心它相对于窗口的位置(即:用户的屏幕)。

因为您的 #leftpanel 位于最左侧,宽度为 320。只需将 #content 的 margin-left 设置为 320px。

关于HTML - 如何停止 div 重叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22431507/

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