浮动的 div 不能并排放置，并留下无法解释的间隙

Question

我正在测试一些东西，我在其中显示 4 个超大图像，这些图像以填充屏幕的象限为中心。所以 2 行和 2 列。

□□
□□

图像位于应该堆叠的 4 个 div 的背景中。所有的 div 都有小边框。

我的问题是高度有效，但对于宽度我需要从每个框的宽度中减去 9px 以使它们堆叠并且不再填满屏幕。没有 9px 它们看起来像：

□
□
□
□

这个 9px 的差距是多少？

最好在jsfiddle

中看到它

#wrapper {
  background: pink;
  border: 5px red solid;
}
#container {
  background: fuchsia;
  border: 5px purple solid;
}
#content {
  background: aqua;
  border: 5px blue solid;
}
#parent {
  background: lime;
  border: 5px green solid;
}
#image1,
#image2,
#image3,
#image4 {
  background: yellow;
  border: 5px orange solid;
  
  /* Each div fill 1/4 screen so get 50% user screen viewport height/width and deduct the height/width of  everything outside of the image divs content area (box model).
So here we must deduct the 1 x 5px border on one side (image border) and 4 x 5px borders on the other side (image, parent, content & wrapper borders)*/
  height: calc(50vh - (5*5px));
  
  /* The line below should be the same as above ie:
      width: calc(50vw - (5*5px)) but I need to deduct a further unexplained 9px and now
      the 4 image divs wont fill the screen? */
  width: calc(50vw - (5*5px + 9px));
  
  float: left;
  
  /* set and center a background image to the div */
  background-image: url("http://dev.bowdenweb.com/tools/i/pixelgrid.png");
  background-position: center;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

<div id="wrapper">
  <div id="content">
    <div id="parent" class="clearfix">
      <div id="image1">
      </div>
      <div id="image2">
      </div>
      <div id="image3">
      </div>
      <div id="image4">
      </div>
    </div>
  </div>
</div>

Answer 1

问题是您正在计算基于绝对宽度视口 (vw) 的图像大小（子 div），并且您包括了边框。当 Web 浏览器的大小与边框的计算完全匹配时，这些部分很适合。

我的建议是使用旧的 % 方法计算大小，

尝试替换：

width: calc(50vw - (5*5px + 9px));

作者：

width: calc(50% - 10px);

参见 jsFiddle

中的示例

Answer 2

问题出在滚动条上（包含在 vw/vw 中）。

如果您使主体隐藏其溢出，它将适用于您的初始计算（请参阅 https://jsfiddle.net/yLgcLd7j/6/）。

但是为了让生活更简单，您可以通过设置 box-sizing:border-box 并在容器上使用 vh/vw 单位来避免这些，其余的则基于百分比。

#wrapper, #wrapper *{box-sizing:border-box;}
#wrapper {
    background:pink; 
    border:5px red solid;
  width:100vw;
  height:100vh;
    }

#container, #content, #parent{width:100%;height:100%;}
#image1, #image2, #image3, #image4 {
    border:5px orange solid;
    float:left;
    width:50%;
    height:50%;
    /* set and center a background image to the div */
    background-image: url("http://dev.bowdenweb.com/tools/i/pixelgrid.png");
    background-position: center;
  }

演示在 https://jsfiddle.net/yLgcLd7j/8/

Answer 3

浮动不是为布局设计的。是的，它们已经以这种方式使用了几十年……作为 hack（CSS 没有提供更好的选择）。浮动旨在将文本环绕在图像周围，而不是构建网格。

视口百分比长度是相对于初始包含块的，而不是父元素，如百分比长度。

您组合了浮动、边框、视口百分比宽度和 box-sizing:content-box，您得到了 9px 的神秘差距。（我没有深入研究，因为我的重点是针对您的问题的现代解决方案。）

今天有CSS3，它提供了两种构建布局的方法：Flex Layout and Grid Layout

Browser support for grid layout is still weak.

Browser support for flex layout is almost complete.

这是使用 flex、box-sizing:border-box 和百分比高度的布局：

html {
  height: 100%;
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;                      /* https://css-tricks.com/box-sizing/ */
}

body { 
  height: 100%;
  margin: 0;                                /* remove default margin */
}

#wrapper {
  background: pink;
  border: 5px red solid;
  height: 100%;
}

#container {
  background: fuchsia;
  border: 5px purple solid;
  height: 100%;
}

#content {
  background: aqua;
  border: 5px blue solid;
  height: 100%;
}

#parent {
  background: lime;
  border: 5px green solid;
  display: flex;                               /* establish flex container */
  flex-wrap: wrap;                             /* allow children to wrap */
  height: 100%;
}

#image1, #image2, #image3, #image4 {
  background: yellow;
  border: 5px orange solid;
  height: 50%;
  flex-basis: 50%;                              /* each item 50% wide */
  background-image: url("http://dev.bowdenweb.com/tools/i/pixelgrid.png");
  background-position: center;
}

<div id="wrapper">
  <div id="content">
    <div id="parent" class="clearfix">
      <div id="image1"></div>
      <div id="image2"></div>
      <div id="image3"></div>
      <div id="image4"></div>
    </div>
  </div>
</div>

jsFiddle

好处：

没有更多的神秘差距。
没有更多的浮动。
没有更多的 clearfix。
不用加边框，用calc.
更干净、更高效的代码
布局是响应式的
与浮动和表格不同，它们提供有限的布局能力，因为它们从未用于构建布局，而弹性框是一种具有广泛选项的现代技术。

要了解有关 flexbox 的更多信息，请访问：

浏览器支持：

所有主流浏览器都支持 Flexbox，except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, use Autoprefixer. More details in 。

浮动的 div 不能并排放置，并留下无法解释的间隙

Floated divs not fitting side by side, and leaving unexplained gap

html

css

css-float

flexbox

jsFiddle