Atm 我第一次尝试创建一个网站,最近找到了一份新工作,需要我学习一些基本的 HTML 和 CSS,所以对于初学者来说,我准备自己复制一个现有网站。
问题/问题是:
我想在 100% 高度制作 3 列,在缩小浏览器窗口时左右可缩放为 0,而中间列包含网站的实际内容,最小宽度为 60%。在较低的分辨率下,我计划在我的 CSS 中实现媒体事物,以在分辨率低于特定限制时删除左 n 右列。 我已将 html&body&all 设置为高度和宽度 100%。 我正在尝试做一些类似这里的事情:The site im trying to duplicate 我目前的尝试可以在这里找到:My attempt
一些不想检查网站的懒人的代码:
<div id=all>
<div id=leftmargin></div>
<div id=wrapper>
<div id=header></div>
<div id=nav></div>
<div id=content></div>
<div id=rightmargin></div>
</div>
</div>
由于我是 Web 开发的新手,如果您需要更多信息,请原谅。 我的问题本质上是“leftmargin”和“rightmargin”与“wrapper”-div 重叠。我非常希望它位于页面的中心,然后通过CSS。
我希望我说得比较清楚,在此先感谢。 亲切的问候 迈克
最佳答案
我会避免仅出于创建边距空间的目的而使用 div。相反,让您的边栏内容创建您正在寻找的边距。内容与边距重叠,因为它不包含在边距 div 中。您需要通过使用与侧边栏大小相同的“margin-left:”或其他方式来调整主要内容的居中方式,但这会改善您的整体结构。
对于以小尺寸与容器重叠的文本,移除“width: 18.8%;”和“空白:nowrap;”来自#lefttop 和“最大宽度:18.8%;”来自#leftnav。这将使文本成为左侧灰色容器的整个宽度,如果行不适合,单词将换行。
最后,按照 jerrylow 的建议,要去掉小宽度的侧边栏,使用
/* screen sizes smaller than 750px apply these styles */
@media screen and (max-width: 750px) {
#leftnavwrap {
display: none;
}
#shortcut {
display: none;
}
#content {
width: 100%;
}
}
关于css - div重叠元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17886542/