Question

我正在尝试为网站构建布局，这是我的CSS和HTML。

问题：

1.带标题和导航div，我不使用保证金合并但仍然觉得它合并了 2.导航和左导航/内容divs合并没有发生

有人可以解释发生什么事吗？

HTML

<div id="container">
    <div id="header">
    </div>
    <div id="navigation">
    </div>
    <div id="left-nav">
    </div>
    <div id="content">
    </div>
</div>

CSS

 html, body { 
        height: 100%; 
        width: 100%; 

        }

    #container {
        height: 100%; 
        width: 100%; 


    }
    #header {
        height: 15%; 
        width: 100%; 
        background-color:grey;
        margin:1%;

    }

    #navigation {
        height: 5%; 
        width: 100%; 
        background-color:grey;
        margin:1%;
    }

    #left-nav {
        height: 40%; 
        width: 20%; 
        background-color:grey;
        margin:1%;
        float:left;
    }

    #content {
        height: 40%; 
        width: 70%; 
        background-color:grey;
        margin:1%;
     float:left;   
    }

jsfiddle

Answer 1

实际上你需要做的就是使用全局CSS重置或

*{margin:0; padding:0;}

也将删除浏览器添加到body的默认边距。

不仅仅是遍历你的CSS而且删除 width: 100%;来自你的DIV元素，因为它们默认设置为auto（是块级元素）。 / p>

既然你已经这样做了，对于所有其他元素，你需要的只是一些简单的数学......

100% - (1%(or 0.5%?) margin * 2sides * No of elements) etc :)

http://jsfiddle.net/7L98c/2/

Answer 2

导航和左导航/内容之间不会发生合并，即浮动左导航和内容。当一个元素是“浮动”时，它周围的边距就不会与其他元素合并。

保证金合并未按预期合并

2 个答案: