0

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

问题/问题是：

我想以 100% 的高度制作 3 列，在缩小浏览器窗口时左右可缩放到 0，而中间列包含网站的实际内容，最小宽度为 60%。在较低的分辨率下，我计划在我的 css 中实现媒体事物，以在分辨率低于某个限制时删除左右列。我已将 html&body&all 设置为高度和宽度 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>

由于我对 Web 开发非常陌生，如果您需要更多信息，请见谅。我的问题本质上是“leftmargin”和“rightmargin”与“wrapper”-div重叠。我非常希望它位于页面的中心，然后在较低的分辨率下使margin-divs“消耗” css。

我希望我让自己相对清楚，在此先感谢。亲切的问候迈克

4

1 回答 1

0

我会避免将 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%;
    }
}
于 2013-07-26T16:57:52.150 回答