html - Foundation5 グリッドを相互に整列

Question

私は 1 つの問題にあまりにも長く取り組んできましたが、適切な解決策が見つかりませんでした。現在、foundation5 フレームワークでグリッド製品ディスプレイを使用していますが、製品を相互に調整するための適切な jscript または css コードが見つかりません。現在の外観は次のとおりです。

私は少なくともこのように見える必要があります:

小さなウィンドウの上にある空白スペースを埋めるために、下に大きな製品ウィンドウが必要です。誰かが助けてくれることを願っています、ありがとう！

Answer 1

divの高さがわかっている場合はposition: relative、大きな div に追加して上に移動するだけで簡単です。

そうでない場合は非常に似ていますが、JavaScript で div の高さと大きい方のオフセットを設定する必要があります。

HTML

<div class="row">
  <div class="small-4 column">
    <div class="inner"></div>
  </div>
  <div class="small-4 column">
    <div class="inner"></div>
  </div>
  <div class="small-4 column">
    <div class="inner small"></div>
  </div>
</div>
<div class="row">
  <div class="small-4 column">
    <div class="inner"></div>
  </div>
  <div class="small-4 column">
    <div class="inner"></div>
  </div>
  <div class="small-4 column">
    <div class="inner big"></div>
  </div>
</div>

SASS

$div-height: 200px;
$big-div-height: 250px;
$small-div-height: 100px;

div.inner {
  height: $div-height;
  background: #99CCFF;
  border: 3px solid black;
  border-radius: 25px;
}

div.row {
  margin-top: 25px;
}

div.big {
  height: $big-div-height;
  position: relative;
  top: $div-height - $big-div-height;
}

div.small {
  height: $small-div-height;
}

CodePen の例