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

问题描述

我想在屏幕右侧放置一个方块（BBB）。没关系，但是另一个div（CCC）正在起床。我怎么能强制CCC不要获取BBB的空白空间。这是我的代码：

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

解决方法

不要使用css“浮动”属性。有很多较新的替代品。您可以改用 flexbox 或 grid。

这里有使用 flexbox 解决此问题的方法：

HTML：

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

CSS：

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

您可以阅读有关 flexbox here 或 grid here 的文章。

,

试试这个代码：

div.col-xs-2 {
  position: relative;
}
div.col-xs-2:first-of-type {
  top: 0;
  left: 0;
}
div.col-xs-2:nth-of-type(2) {
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  background-color: green;
}
div.col-xs-2:last-of-type {
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  background-color: blue;
}