javascript 砌体 - 列宽百分比 + 装订线
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30935502/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Masonry - Column width percent + gutter
提问by Dave Lin
Why can't I show 4 items by row if the width of each one is 25%and the gutter param is 10? Please help me!
如果每个项目的宽度是25%并且装订线参数是 ，为什么我不能按行显示 4 个项目10？请帮我！
$('.grid').masonry({
itemSelector: '.grid-item',
columnWidth: '.grid-sizer',
gutter: 10
});
回答by Samir Das
Change
改变
.grid-item {
width: calc(25%);
}
to
到
.grid-item {
width: calc(25% - 10px);
}
回答by niklas
The accepted answer above is not pixel-perfect. If you watch the pen http://codepen.io/anon/pen/aOLxwWyou see a gutter to the very right, which is probably not what you want, at least not what I want. That is due to, the item-width is calculated too small with
上面接受的答案不是像素完美的。如果您观看笔http://codepen.io/anon/pen/aOLxwW，您会看到最右边的排水沟，这可能不是您想要的，至少不是我想要的。那是因为，item-width 计算的太小了
.grid-item {
width: calc(25% - 10px);
}
It should in fact be calc(25% - 7.5px). The formula for it would be
事实上应该是calc(25% - 7.5px)。它的公式是
//pseudocode to illustrate the idea. how you would do that dynamically whould be up to the language you choose (e.g. php, js...)
$number_of_cols = 3; //for example
$column_width = 100 / $number_of_cols; //a float value, e.g. 33.33333333 in this example
$item_width_diff = $gutter * ($number_of_cols - 1) / $number_of_cols; //in this example: 10*2/3 = 6.6666666
then in your css you would have
那么在你的 css 中你会有
.grid-item {
width: calc(25% - $item_width_diff);
}
回答by KnightIn
Just normalize the css before adding your own css to HTML element. And it will work. It's adding margin to div from inherited css.
在将您自己的 css 添加到 HTML 元素之前，只需对 css 进行规范化。它会起作用。它正在从继承的 css 向 div 添加边距。
