如何解决在底部与 css 对齐的浮动 div 周围的文本
是否有可能实现这样的东西,但橙色正方形与左下角对齐,使用这种 html 结构?
.float-block{
width: 200px;
background-color:orange;
}
.block{
height: 50px;
width: 50px;
background-color: orangered;
float:left;
bottom:0;
}
<div class='float-block'>
<div class='block'></div>
<p>Suscipit soDales a a mus laoreet neque ante cursus est et quam turpis egestas scelerisque mattis.Quisque a ut cras a ad lobortis ut cum consequat lacinia congue placerat ullamcorper sem a.Blandit nunc posuere ullamcorper vestibulum.</p>
</div>
解决方法
您可以使用 shape-outside
.float-block {
width: 200px;
background-color: orange;
}
.block {
height: 50px;
width: 50px;
background-color: orangered;
float: left;
/* same value inside margin and shape-outside */
shape-outside: inset(130px 0 0 0);
margin-top: 130px;
}
<div class='float-block'>
<div class='block'></div>
<p>Suscipit sodales a a mus laoreet neque ante cursus est et quam turpis egestas scelerisque mattis.Quisque a ut cras a ad lobortis ut cum consequat lacinia congue placerat ullamcorper sem a.Blandit nunc posuere ullamcorper vestibulum.</p>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。