浮動 div 周圍的文本與 css 底部對齊

Question

是否有可能實現這樣的事情，但橙色正方形與左下角對齊，使用這個 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 aa 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>

Answer 1

你可以使用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 aa 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>