0

calc()を使用して画面上で分割された 3 つの垂直行があります 。各ボックス タイプの高さを設定するために 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 ここに画像の説明を入力

縦2列の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

おそらく、1 ピクセルのギャップは丸め誤差が原因です。私が考えることができる唯一の解決策は、JavaScript を使用してコンテナーの幅を強制的に 3 の倍数にすることです。

より良い解決策は、CSS テーブル表示を使用することです。最初の 2 つの「セル」に 33.33333333% の幅を設定し、3 番目のセルのサイズを自動調整します。高さは依然として 1 ～ 2 ピクセルずれますが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 に答える