Question

所以我找到了一篇关于响应式设计(here)的文章，我尝试制作类似教程的部分文章。该网站表示要根据元素所在容器的大小来调整元素的大小。（我除以1000而不是1050的原因是因为div #main上的边距使其为1000px，即使标题是1050px）如果这没有意义，链接可以解释它。我的浏览器全尺寸看起来很好，但是如果我将窗口缩小到很多，那么它就不会调整它的大小。我不确定我的代码的哪一部分是错的，但是如果有人可以帮助我那会很棒！ Here's指向我所创建网页的链接。这是我的源代码：

<!DOCTYPE html>
<html>
<head>
<style>

body, html {
    margin: 0;
    height: 100%;
    width: 100%;
}    

header {
    height: 100px;
    max-width: 1050px;
    margin: 0 auto;
}

#main {
    border-radius: 25px;
    background-color: #aaa;
    height: inherit;
    max-width: inherit;
    margin: 25px;
}

.box {
    width: 47.5%;
    height: 75%;
    margin: 1.25%;
    background-color: #444;
    border-radius: 15px;
    float: left;
}

</style>
</head>
<body>

<header>
    <div id="main">
        <span class="box">
        </span>
        <span class="box">
        </span>
    </div>
</header>

</body>
</html>

Answer 1

也许如果我解释发生了什么，你会发现实际上没有问题。

内盒具有固定高度，基于父容器高度的75％。因此，所有元素的高度保持不变。但是，您的边距是父元素宽度的一小部分，因此它们随页面宽度而变化。随着页面变小，边距变小。由于div自然地尽可能地位于页面上，因此它会移向其父级的边界。

所有这一切都与您的设计有关。要修复它，请设置固定的上边距和下边距：

.box {margin: 12px 1.25%;}

CSS边缘表现得很奇怪

1 个答案: