css - Div重叠元素

标签 css html

Atm我正在网站上进行首次尝试,最近又找到了一份新工作,该工作要求我学习一些基本的HTML&CSS,因此对于初学者来说,我设置了自己来复制现有的网站。

问题/问题是:

我想在高度为100%的情况下制作3列,在缩小浏览器窗口的大小时,左右可缩放为0,而中间的列包含网站的实际内容,最小宽度为60%。在较低的分辨率下,我计划在分辨率低于某个确定限制时在CSS中实施media-thing,以除去左n右列。
我将html&body&all设置为hight,宽度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重叠。我非常希望将其放在页面的中心,然后通过较低的分辨率使margin-divs“ expendable” css。

我希望我说得比较清楚,在此先感谢。
亲切的问候
麦克风

最佳答案

我会避免将div用于创建边距空间的唯一目的。相反,让您的侧边栏内容创建所需的边距。内容与边距重叠,因为它不包含在边距div中。您需要使用与边栏相同的大小或其他方式来调整主要内容的居中方式,例如“ margin-left:”,但这会改善您的整体结构。

至于以小尺寸覆盖容器的文本,请删除“宽度: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/

相关文章:

html - 如何以不太具体的方式更改 Bootstrap 表 strip 化?

html - 如何使用带有Apps Script的CSS/HTML Search Box for Google Sites中的“链接”部分?

javascript - 如何在JavaScript中调用类函数?

python - 更改“控制表”(Python)中单元格的样式或背景

html - 内联 block div 元素未按预期排列

javascript - 将网站中的所有图像下移一半高度

jquery - 如何使用jQuery更改HTML元素的位置

html - 使用 css 和 HTML 的 streamlabs OBS 的简单文本删除效果

html - 如何使用CSS控制特定句子

javascript - 页面加载时的插件和 html - 元素无处不在的瞬间