Css Div重叠元素

Atm我在一个网站上做了我的第一次尝试，最近得到了一份新的工作，要求我学习一些基本的HTML和CSS，所以作为一个初学者，我设置自己复制一个现有的网站

问题是：

我想让3列在100%的高度，左边和右边的缩放到0缩小浏览器窗口，而中间的列是包含网站的实际内容，最小宽度为60%。在较低的分辨率下，我计划在css中实现媒体功能，当分辨率低于一定的限制时，删除左n右列。 我已经将html和body&all设置为hight&width 100%。 我试着做一些类似于这里的事情： 我当前的尝试可以在这里找到：

不想检查站点的懒惰者的一些代码：

<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>

由于我对网络开发非常陌生，如果您需要更多信息，请原谅。 我的问题本质上是“leftmargin”和“rightmargin”重叠在“wrapper”-div上。我非常希望它位于页面的中心，然后通过css以较低的分辨率使边距div成为“可消耗的”

我希望我说得比较清楚，提前谢谢。 问候

---

Mike

我会避免仅为了创建边距空间而使用div。相反，让您的侧栏内容创建您要查找的边距。内容与边距重叠，因为它不包含在边距div中。您需要使用“左边距：“与侧边栏大小相同或其他方式相同，但它将改善您的整体结构

对于小尺寸重叠容器的文本，从#lefttop中删除“宽度：18.8%”和“空白：nowrap；”，从#leftnav中删除“最大宽度：18.8%”。这将使文本成为左侧灰色容器的全宽，如果行不合适，则文字将换行

最后，按照杰里洛的建议，要去掉小宽度的侧栏，请使用

/*小于750px的屏幕大小应用这些样式*/
@媒体屏幕和屏幕（最大宽度：750px）{
#左换行{
显示：无；
}
#捷径{
显示：无；
}
#内容{
宽度：100%；
}
}

我可能会建议使用媒体查询，这样当它达到临界点时，你只需隐藏div，或者更好，将它们堆叠起来，这样用户就不会因为其视口较小而丢失内容。我玩过一些媒体查询（这是css中的@media things，对吗？对不起，我的新手问题，这是我的第一个网站）我担心当用户缩小窗口时，它会突然削减利润，或者这是怎么发生的？我在寻找一个解决方案，这些“利润”随着我窗口的缩小而逐渐缩小，这样就只剩下内容了。如果我使用mediaqueries，它不会在特定点（分辨率、确定的像素宽度）上“中断”吗？我已经设置了一个mediaquery，这样当加载到iPhoneHx上输入Milche PaternLo all和感谢您的输入时，它只显示包装器div的内容，但在负号tho上感到困惑。我已经尝试设置媒体断点，但它不会使边距“突然”消失并调整，与当前缩小浏览器时看到的流体运动相反。很抱歉，这是一个新问题。如果在调整大小时它突然改变，那也没关系。对于一个反应灵敏的设计，重要的是它在每一个屏幕尺寸上都很好看（而一个铅笔薄的、一定宽度的侧面导航看起来不太好看）。调整大小时的外观并不重要，因为除了设计师之外，很少有人在将窗口拉得更宽时观看布局。