使用calc（）的Div间距偏移

Question

我有3个垂直行，使用 calc（）在我的屏幕上划分 我使用JS为每个盒子类型设置高度

width: calc(1/3 * 100%);

这是设置每个块高度的javascript，它设置高度等于宽度 如果是长盒子，它将高度设置为宽度的一半。

$('.box1').height( $('.box1').width() );
$('.box2').height( $('.box2').width() / 2 );
$('.box4').height( $('.box4').width() );

我在行中的列之间有一个奇怪的偏移（见截图）

您可以在此处查看此页面http://cloudlabme.webhosting.be/4sr

这是两个垂直行的HTML

<div class="container">
    <div class="row">
        <div class="box box4 box-event" style="background-image: url(build/img/events/2.jpg)"><h1>II</h1></div>
        <div class="box box2 box-medium"></div>
    </div>

    <div class="row">
        <div class="box box2 box-light"></div>
        <div class="box box1 box-dark"><h3>Hier</h3></div>
        <div class="box box1 box-medium"></div>
        <div class="box box2"></div>
    </div>
</div>

这是我的CSS

.container {
    position: relative;
    width: 100%;
    max-width: $breakpoint;
    margin: 0 auto;
    z-index: 0;
}

.row {
    float: left;
    width: calc(1/3 * 100%);
    background: #f2f2f2;
}

/* BOX */
.box {
    &.box-light {background: #fff;}
    &.box-medium {background: #666;}
    &.box-dark {background: #111;}
}

.box1 {
    float: left;
    width:50%;
    background: #ff4444;
}

.box2 {
    clear: left;
    width: 100%;
    background: #ff6666;
}

.box4 {
    clear: left;
    width: 100%;
    background: #ff8888;
}

谢谢！这是在扼杀我的大脑！

Answer 1

最有可能的是，一个像素间隙是由四舍五入的错误引起的。我能想到的唯一解决方案是使用JavaScript强制容器宽度为3的倍数。

更好的解决方案是使用CSS表格显示。在前两个“单元格”上设置33.33333333％宽度，让第三个自动调整大小。高度仍将偏离一个或两个像素，但这比使用calc()更好并与四舍五入的问题作斗争。

$(window).on("load resize", function() {
  $('.box1').height($('.box1').width());
  $('.box2').height($('.box2').width() / 2);
  $('.box4').height($('.box4').width());
});

.container {
  display: table;
  width: 100%;
}
.row {
  display: table-cell;
  vertical-align: top;
  background: #CCC;
}
.row:first-child, .row:first-child + .row {
  width: 33.33333333%;
}
.box1 {
  float: left;
  width: 50%;
  background: #C99;
}
.box2 {
  clear: left;
  background: #C66;
}
.box4 {
  clear: left;
  background: #C33;
}
h1, h3 {
  margin: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="container">
  <div class="row">
    <div class="box box4">
      <h1>II</h1>
    </div>
    <div class="box box2"></div>
  </div>
  <div class="row">
    <div class="box box2"></div>
    <div class="box box1">
      <h3>Hier</h3>
    </div>
    <div class="box box1"></div>
    <div class="box box2"></div>
  </div>
  <div class="row">
    <div class="box box2"></div>
    <div class="box box4"></div>
  </div>
</div>