Question

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

问题/问题是：

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

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

我希望我能让自己相对清楚，先谢谢。亲切的问候麦克

Answer 1

我会避免使用div来创建边距空间。相反，让你的边栏内容创建你正在寻找的边距。内容与保证金重叠，因为它不包含在保证金div中。您需要使用“margin-left：”调整主要内容的居中方式，与侧边栏或其他方式相同，但它会改善您的整体结构。

对于小尺寸容器的文本重叠，删除“宽度：18.8％;”和“white-space：nowrap;”来自#lefttop和“max-width：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%;
    }
}

Div重叠元素

1 个答案: