如何在html中创建可变大小的tile布局

Question

我正在尝试查看是否可以创建一个类似下面的可变大小的磁贴布局，而不使用任何中间包装snapShot.exists()。

我首先尝试了一种flexbox方法，然后发现flexbox并不是为了让孩子们跨行，然后是正常的divs和inline-block方法而设计的，但确切地说同样的问题。我还没有能够让这些块穿过不同的行并进入它们之间的空间。

我也在寻找一种无需javascript的方法。所以不使用像砌体这样的东西。

Codepen

对我来说，重要的是要指出我正在尝试解决这个问题一般，这意味着虽然我们当然可以找到一种方法来创建这个特别的布局，我更担心的是如何创建这种通用类型的布局，我可能不会提前知道瓷砖的确切方向，顺序或大小。

这是所需的float: left（html）：

jade

和.xbox-tiles .tile 1 x 1 .tile 1 x 1 .big-tile 2 x 2 .tile 1 x 1 .tile 1 x 1 .tile 1 x 1 .tile 1 x 1 .tile 1 x 1 .tile 1 x 1 ：

sass

Answer 1

关于this question的评论，我能够生成这个codepen，它使用简单的浮点数，不需要弹性箱，换句话说，将剩下的所有小牌和左边的小牌都浮动：

@import "bourbon"

%tile    
    box-sizing: border-box

.xbox-tiles

    height: 90vh
    width: 90vw

    .tile
        float: left
        height: 33.33%
        width: 25%
        @extend %tile

    .big-tile
        float: right
        height: 66.66%
        width: 50%
        @extend %tile

body {
  background-color: grey;
}

.xbox-tiles .tile, .xbox-tiles .big-tile {
  box-sizing: border-box;
  border: 2px solid white;
  margin: 0;
}

.xbox-tiles {
  height: 90vh;
  width: 90vw;
  background-color: cyan;
}
.xbox-tiles .tile {
  float: left;
  height: 33.33%;
  width: 25%;
}
.xbox-tiles .big-tile {
  float: right;
  height: 66.66%;
  width: 50%;
}

<div class="xbox-tiles">
  <div class="tile">1 x 1 - 1</div>
  <div class="tile">1 x 1 - 2</div>
  <div class="big-tile">2 x 2 - 3</div>
  <div class="tile">1 x 1 - 4</div>
  <div class="tile">1 x 1 - 5</div>
  <div class="tile">1 x 1 - 6</div>
  <div class="tile">1 x 1 - 7</div>
  <div class="tile">1 x 1 - 8</div>
  <div class="tile">1 x 1 - 9</div>
</div>