css - 元素在右下角向左浮动

Question

我收到了与此处所附屏幕类似的屏幕。任务是让多个小元素向左浮动到右下角的较大元素。

我可以通过将小元素包装在多个容器中来轻松完成这项工作，或者在这个特定场景中我可以将大元素添加为数字 11，但是如果小元素的数量发生变化怎么办？我总是不得不手动调整。

因此我需要一种方法(也许通过 flexbox？？)始终将大元素定位在右下角并使小元素 float 在它周围!

有谁知道怎么做才好？

Answer 1

使用 CSS float 来定位它们，只需分配 .small 或 .large 类，元素就会适合您用图片显示的方式。

.small {
  width: 18%;
  height: 60px;
  background-color: red;
  float: left;
  margin: 1%;
}
.large {
  width: 38%;
  height: 130px;
  background-color: red;
  float: right;
  margin: 1%;
}

<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>

<div class="large"></div>