Question

所以我的页面有一个宽度为50％的标题div，然后我想在它下面放置3个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正在拥抱标题的边缘。

Answer 1

您的标题类已分配给您的<BODY>标记，这意味着边距会添加到您的整个html正文中。所以，你的div没有实际的余量。并且，由于边框被添加到标题中，因此顶部矩形中的文本仅被视为div中的文本，而下一行中的div更接近。其次，因为你已经为你的中间div提供了宽度，所以下一个div已经到了下一行。

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

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

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

1 个答案: