Html 浮动后DIV位置不正确：右

我想让我的一个块（BBB）在屏幕的右侧。没关系，但另一个分区（CCC）正在启动。我如何强制CCC dont以获取BBB的空白空间。以下是我的代码：

AAA
BBB
CCC

只是不要使用css“float”属性。有很多新的选择。您可以改用flexbox或grid

下面是使用flexbox解决此问题的方法：

HTML:

您可以阅读有关flexbox或grid的信息。

请尝试以下代码：

div.col-xs-2{
位置：相对位置；
}
div.col-xs-2：类型的第一个{
排名：0；
左：0；
}
第col-xs-2部分：第n个类型（2）{
最高：50%；
转化：translateY（-50%）；
左：0；
背景颜色：绿色；
}
div.col-xs-2：类型的最后一个{
最高：50%；
右：0；
转化：translateY（-50%）；
背景颜色：蓝色；
}

不要使用css“float”属性。有很多新的选择。您可以使用flexbox或grid。您的代码正在运行，但是这些块中的my TextArea的大小现在非常小。您也可以在CSS中设置它们的大小。只需编写如下内容：textarea{height:100px；width:200px；}

                        <div class="row text-left">
                         <div class="col-xs-2">
                                <h5>AAA</h5>
                                <field name="AAA"/>
                            </div>
                        </div>
                        <div class="row text-left" style="float: right;">
                            <div class="col-xs-2 ">
                                <h5>BBB</h5>
                                <field name="BBB" />
                            </div>
                        </div>

                         <div class="row text-left" >
                            <div class="col-xs-2">
                                <h5>CCC</h5>
                                <field name="CCC"/>
                            </div>
                        </div>

<div class="wrapper">
   <div class="aaa">aaa</div>
   <div class="bbb">bbb</div>
   <div class="ccc">ccc</div>
</div>

.wrapper {
   display: flex;
   flex-direction: column;
}
.aaa, .ccc {
   align-self: flex-start;
}
.bbb {
   align-self: flex-end;
}