Question

这里有百分比问题。

我正在为内联网数据库的前端工作，并且几乎完成了这项工作，但是，我发现了一个相当顽固的错误。这在firefox中呈现得很好，但在chrome中，我遇到的盒子大小问题可能与两者如何计算百分比有关。

我无法发布我的屏幕抓取，但这里是小提琴：

https://jsfiddle.net/DeanActual/k317fpz5/

你会看到你是否在chrome中移动视口，一些小盒子会在大盒子旁边“卡住”。如果它有或没有边界并不重要，我已经尝试弄乱了33.329％这样的百分比，这似乎再次被firefox接受，但被chrome唾弃。

我已经阅读了一下，这似乎是一个众所周知的问题困扰着许多人，但我找不到修复。

下面的小提琴代码：

<div id="body">    
  <div class="block large"></div>
  <div class="block small"></div>
  <div class="block small"></div>
  <div class="block small"></div>
  <div class="block small"></div>
  <div class="block small"></div>
  <div class="block small"></div>
  <div class="block small"></div>
  <div class="block small"></div>
  <div class="block small"></div>
  <div class="block small"></div>
  <div class="block small"></div>
  <div class="block small"></div>    
</div>

CSS：

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.block:after{
    content:" ";
    display:block;
    margin-top: 100%;
}

.block{
    float:left;
    border:5px solid black;
}

.large{
    width:33.329%;
    background:pink;
}

.small{
    width:16.666%;
}

div .small:nth-of-type(3n+1) {
     background-color: blue;
}
div .small:nth-of-type(3n+2) {
     background-color: red;
}
div .small:nth-of-type(3n+3) {
     background-color: yellow;
}

Answer 1

对于小分区，您应将宽度减小到16.600％，对于较小的分区，您可以使用媒体查询并使该宽度更小并使其达到16.500％。因此，您可以为大屏幕和小屏幕以及每个浏览器获得所需的结果。

Answer 2

Chrome正确呈现。 float: left表示＆＃34;尽可能保留＆＃34;，当左侧没有任何内容（因为高度）时，div位于容器的left:0。
如果要实现预期的布局，请制作宽度为33％的容器，其中包含大块和另一个宽度为66％的容器，其中包含小块。

网格设计使用Chrome中的百分比（33.333％）

2 个答案: