CSS边界行为奇怪

所以我找到了一篇关于响应式设计(here)的文章，我试着做出与本教程部分内容相似的内容。该网站表示，通过元素所在容器的大小来分割元素的大小（我将其除以1000而不是1050的原因是因为div＃main上的边距使其成为1000px，即使头是1050px）如果这没有意义，那么链接可以解释它。用我的浏览器看起来很好，但如果我缩小窗口的大小，它就不会调整它的大小。我不完全确定我的代码的哪一部分是错误的，但如果有人能帮助我，那会很棒！ Here's指向我所做的页面的链接。这里是我的源代码：CSS边界行为奇怪

<!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>

来源

2013-02-19 Addison

在哪个浏览器中尝试？我尝试了Chrome的示例页面，它工作得很好，看不出任何问题:( – 2013-02-19 04:16:04

我正在使用Chrome测试版，尽管我不认为测试版会起作用，您是否尝试调整大小？对于我来说，直到它达到一定的尺寸 – Addison 2013-02-19 04:17:27

你选择SPAN（对于class =“box”）的任何具体原因，你可以尝试用DIV替换它，因为你有浮动的权利：是的，我遇到了类似的问题过去 – 2013-02-19 04:20:12

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

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

这一切都与您的设计预计。要修复它，请设置固定的顶部和底部边距：

.box {margin: 12px 1.25%;}

来源

2013-02-19 04:27:24 isherwood

是的，固定12px的顶部和底部都可以使用。 – 2013-02-19 04:28:32

是的，修好了。非常感谢！ – Addison 2013-02-19 04:33:40

不客气。请记住选择一个答案 – isherwood 2013-02-19 04:34:37

CSS边界行为奇怪

回答

相关问题