html - CSS - 在顶 Angular 设置 div 并使其他 div 围绕它 float

Question

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

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

我尝试过的:

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>