css - div重叠元素

标签 css html

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/

相关文章:

php - 在 PHP 中检索 &lt;title&gt; 的最快方法

html - 调整窗口大小广告将 div 保持在同一位置

html - 创建类似于android的html布局

javascript - 添加图片会导致 slick carousel 出现故障

javascript - HTML5 和 JQuery 匹配游戏自动加载

html - 我如何缩小 ruby​​ on rails 中的 HTML 输出?

javascript - 如何最好地在 js 上对产品进行排序?

css - Safari/Opera/Chrome/FF 从完全相同的文件位置提取不同的样式表

css - 如何删除 Bootstrap/css 中跨度边框的深度?

css - element.style 任意增加字体大小