在底部与 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>

css-float html