Question

我有一个960px宽的包装，然后是一个930px宽的主内容包装，左/右边距为15px。在主要内容包装内，有三个div左侧浮动，每个280px宽，15px margin-right来填充主要内容。为了避免将div赋予右边缘并使其不合适，我给了它另一个类并将其margin-right设置为0.

我正在努力使网站响应，这些是我的百分比计算：
包裹= 100％
主含量= 96.875％
主要内容利润= 1.5625％
的div = 30.10752688％
div margin = 1.61290323

CSS：

#page-wrap {
    width:960px; 
    margin: 0 auto; 
    background: white;
}
#main-content {
    width:96.875%;
    margin:15px 1.5625% 0 1.5625%;
}
.box { (the divs)
    float:left;
    width:30.10752688%;
    min-height:160px;
    margin:30px 1.61290323% 0 0;
}
.right{ (only the div to the right)
    margin-right:0;
}

HTML

<div id="page-wrap">
<div id="main-content">  

<div class="box">   
content
</div>

<div class="box">   
content
</div>

<div class="box right"> 
content
</div>

</div>
</div>

我不知道为什么div似乎没有正确调整大小。任何帮助将非常感激！现在可以在此处查看该网站：http://hl.kylmark.se

Answer 1

我看到的问题是所有蓝框周围都有固定的10px填充。由于填充在上添加到元素的宽度，因此它会抛弃百分比数学。

解决方案1 

您可以将这些框上的边填充更改为百分比值，就像其他所有内容一样：

.blue {
   ...
   padding: 10px 1.0752688%;
}

使用这种方法，当你变小时，你会折叠边框，这可能是不可取的。

解决方案2

也许更好的方法是更改box-sizing属性以计算从边框到边框的宽度，而不是从内容边缘到内容边缘。这样你就可以在一个灵活的容器里面放一个10px的填充物，其宽度是正确的：

.box {
   ...
   width: 32.258065%;
   box-sizing: border-box;
}

还有一件事

您可能还需要注意子像素舍入。当您的百分比计算到整个像素以外的其他值时，浏览器必须决定如何舍入它。如果过多的东西被四舍五入，宽度将变得太大并导致内容在某些浏览器中跳转。您需要在支持的浏览器中仔细检查一下。 You can read a good explanation here

响应div的计算不起作用

1 个答案: