左下方的元素左右浮动

Question

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

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

因此，我需要一种方法（可能通过flexbox ??）始终将大元素放在右下角，并使小元素浮动它！

有谁知道该怎么做？

Answer 1

使用CSS浮动来定位它们，只需指定类 .small 或 .large ，这些元素将适合您对图片的显示方式。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;