div 与其上方的标题 div 对齐，而不是整个页面答案

【问题标题】：Div's align with header div above it and not the whole pagediv 与其上方的标题 div 对齐，而不是整个页面
【发布时间】：2015-11-04 18:42:38
【问题描述】：

所以我的页面有一个宽度为 50% 的标题 div，然后我想在其下方放置 3 个 div，但这样做时，我将所有这些 div 设置为左侧，并将宽度设置为 33% .我遇到的问题是正在创建的框与标题 div 而不是页面对齐。以下是页面显示方式的代码和图片。

<!DOCTYPE html>
<html>

    <head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css" />
        <title>Main Page</title>
    </head>

    <body class="header">
        <div class="div1">This is the header div that lies on the top of the webpage in fixed position.</div>
        <div class="blank-div"></div>
        <div align="center" class="float-left">CONTENT OF COLUMN ONE GOES HERE</div>
        <div align="center" class="float-left-middle-cell">CONTENT OF COLUMN TWO GOES HERE</div>
        <div align="center" class="float-left">CONTENT OF COLUMN THREE GOES HERE</div>
    </body>

</html>

然后我这里有css

.header {
    width:50%;
    height:72px;
    border: 3px solid black;
    float:center;
    position:fixed;
    display:block-inline;
    margin-left:25%;
    margin-right:25%;
    margin-top:20px;
    margin-bottom:60px;
    text-align:center;
    clear:both;
}
.float-left {
    float:left;
    width:33%;
    height:200px;
    border: 3px solid black;
    text-align:center;
}
.float-left-middle-cell {
    float:left;
    width:25%;
    height:200px;
    border: 3px solid black;
    text-align:center;
    margin-left:12.5%;
    margin-right:12.5%;
}
.blank-div {
    width:100%;
    height:10%;
}

This is a picture of the site so far. 如您所见，div 紧贴标题的边缘。

【问题讨论】：

您的元素都从继承 css，这会导致真正的问题，尤其是在边距方面。边距是导致三列溢出以及标题元素重叠的原因。摆脱正文中的 css，失去“位置：固定”，并开始将样式应用于实际元素。此外，没有“浮动：中心”

标签： html css divider

【解决方案1】：

您的标头类被分配给您的<BODY> 标签，这意味着边距被添加到您的整个html 正文中。因此，您的 div 没有实际边距。而且，由于在标题中添加了边框，因此顶部矩形中的文本被认为只是 div 内的文本，并且下一行中的 div 更接近。其次，由于您为中间 div 提供了宽度，因此下一个 div 已转到下一行。

解决方案：删除或更改float-left-middle-cell 类的值。

然后尝试为 div1 类应用边框并为其设置边距。

【讨论】：