0

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

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

4

1 回答 1

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>

于 2014-11-21T13:11:15.920 回答