Question

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

□□
□□

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

我的问题是高度有效，但是对于宽度，我需要从每个盒子的宽度中扣除9px以使它们堆叠，它们不再填满屏幕。如果没有9px，它们看起来像：

□
□
□
□

这9px差距是多少？

最好在jsfiddle

中查看

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 1

Floats不是为布局而设计的。是的，他们已经使用了这种方式几十年...... 作为黑客（CSS没有提供更好的选择）。 Floats设计用于在图像周围包装文本，而不是构建网格。

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

您可以组合浮点数，边框，视口百分比宽度和box-sizing:content-box，并获得9px的神秘差距。（我没有进一步深入研究，因为我的重点是解决问题的现代解决方案。）

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

Browser support for grid layout is still weak.

Browser support for flex layout is almost complete.

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

jsFiddle

优点：

没有更多的神秘缺口。
不再有花车。
没有更多的clearfix。
无需添加边框并使用calc。
更清洁，更高效的代码
布局响应
与花车和桌子不同，因为它们从不用于建筑布局而提供有限的布局容量，所以flexbox是一种具有多种选择的现代技术。

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

浏览器支持：

所有主流浏览器except IE 8 & 9都支持Flexbox。最近的一些浏览器版本，例如Safari 8和IE10，需要vendor prefixes。要快速添加所需的所有前缀，请使用Autoprefixer。 this answer中的更多详细信息。

Answer 2

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

我的推荐用于使用旧的％方法计算大小，

尝试替换：

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

由：

width: calc(50% - 10px);

请参阅jsFiddle

中的示例

Answer 3

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

如果您让身体隐藏其溢出，它将适用于您的初始计算（请参阅http://puu.sh/orazd/b8a85ac5c6.png ）。

但是为了简化生活，您可以通过设置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/6/

演示

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

3 个答案:

jsFiddle