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>