CSS - 将 div 设置在顶角并让其他 div 漂浮在它周围

Question

我想让一个按钮始终浮动在右上角，而其他具有动态宽度的按钮也在其左侧和下方浮动。

右边的按钮是我要粘的，蓝色的可以有不同的宽度，我无法控制。

我的尝试：

1. 将红色按钮设置为position: absolute，但它做到了 与其他按钮重叠
2. 将padding-right添加到周围的框中， 这会强制红色按钮下方的空间为空。

Answer 1

在红色按钮上使用float: right解决它，并确保红色按钮是html中的第一个。

.container {
  width: 300px;
}
.btn {
  border: 1px solid #99f;
  height: 30px;
  width: 90px;
  display: inline-block;
}
.btn.btn-red {
  float: right;
  border: 1px solid #f99;
}

<div class="container">
  <div class="btn btn-red"></div>
  <div class="btn"></div>
  <div class="btn"></div>
  <div class="btn"></div>
  <div class="btn"></div>
  <div class="btn"></div>
  <div class="btn"></div>
  <div class="btn"></div>  
</div>