CSS - 在顶角设置div并使其他div在其周围浮动

Question

我希望任何时候都有一个浮动在右上角的按钮，其他具有动态宽度的按钮在它的左侧和下方浮动。

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

我尝试了什么：

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

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;