如何解决浮动后 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;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。