响应div不工作的计算

我有一个960px宽的包装，然后是一个930px宽的主内容包装，包含15px的左/右边距。在主内容包装中，有三个浮动左边的div，每个宽度为280px，并具有15px的边距 - 用于填充主要内容。为了避免给股利的权利保证金，使其不适合我给它另一个类及其保证金权设置为0。响应div不工作的计算

我努力使网站的响应，这些都是我的百分比计算：
包裹= 100％
主含量= 96.875％
主内容利润率= 1.5625％
的div = 30.10752688％
DIV利润率= 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

来源

2013-12-20 kylmark

请张贴相关代码来重现，谢谢 – brandonscript

在Firefox中获取Firebug并随时随地使用它。我试着改变你的div宽度到29％，并能够产生更好的结果。 – dmikester1

为什么你需要精确的测量？我敢肯定，大多数浏览器都会在小数点后的3-4个位置四舍五入... –

我看到的问题是，有一个固定的10px填充所有蓝色框周围。由于填充是添加到到一个元素的宽度，它抛出你的百分比数学。

解决方案1 

你可以只改变那些方框的边填充为百分比值和其他事物一样：

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

用这种方法你得到你会崩溃的边缘较小，这可能不合意。

解决方案2

也许更好的做法是改变箱集束性来计算边框宽度边境，而不是从内容边缘的内容优势。这样，你可以有一个10px的填充柔性容器，其宽度是正确想通内：

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

一件事

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

来源

2013-12-20 21:37:52 nwalton

这样做！我知道我错过了那样简单的事情！ ;） – kylmark

响应div不工作的计算

回答

相关问题