元素在右下角的另一个周围浮动答案

【问题标题】：Elements floating left around another on the bottom right元素在右下角的另一个周围浮动
【发布时间】：2017-10-24 14:55:45
【问题描述】：

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

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

因此，我需要一种方法（也许通过 flexbox？？）始终将大元素定位在右下角并让小元素在其周围浮动！

有人知道怎么做吗？

【问题讨论】：

CSS Grid 非常适合这个。 gridbyexample.com/examples
很确定，即使是 CSS-Grid 也不能动态管理这个......不过，看看是否可能很有趣。
相关 - stackoverflow.com/questions/499829/…
我还没有使用过这种网格，但乍一看还不错……唯一的问题是，ie11 和 edge15 仅部分支持它……caniuse.com/#search=grid跨度>
不知道我到底有什么问题，也不知道为什么会被否决。尝试添加/删除任意数量的元素，它始终按照右下角的要求显示。

标签： css grid flexbox floating

【解决方案1】：

使用 CSS 浮动来定位它们，只需指定类 .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>

【讨论】：

谢谢，但是请看，正如您在我的问题中所读到的那样，这不是我想要的，因为它使这个网格成为静态的......假设有人告诉我我们需要 6 个项目在一行而不是 5。比我必须手动调整“大”元素的位置。 ://
您不必调整大的位置。您唯一需要更改的是元素的宽度，因此它可能适合 6 而不是 5。顺序无关紧要，我重新排列了它，因此“大”元素始终位于最后，因此无论如何它都能正常工作添加了许多元素。