使用形状外包装时，如何将img与文本底部对齐

debugcn 发表于 Dev

克里斯蒂·西蒙森（Kristi Simonson）

我一直在研究外部形状，并在此处进行操作：http : //www.thelionscall.com/wp-content/Temp/wrap-test.html

.element {
  shape-outside: url(https://i.ibb.co/44KLGpq/marginalia-susan-transparent.png);
  -webkit-shape-outside: url(https://i.ibb.co/44KLGpq/marginalia-susan-transparent.png);
  shape-image-threshold: 0.5;
  float: right;
  height: 300px;
  shape-margin: 1em;
}

<body><img class="element" src="https://i.ibb.co/44KLGpq/marginalia-susan-transparent.png">
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Venenatis urna cursus eget nunc scelerisque viverra mauris in. Sagittis purus sit amet volutpat. Sollicitudin tempor id eu nisl
    nunc mi ipsum. Eleifend mi in nulla posuere sollicitudin. Ac placerat vestibulum lectus mauris ultrices eros in cursus turpis. Suscipit tellus mauris a diam maecenas. Congue mauris rhoncus aenean vel elit scelerisque. Hac habitasse platea dictumst
    quisque. Semper quis lectus nulla at volutpat. Tincidunt augue interdum velit euismod. Sit amet aliquam id diam maecenas. Sem et tortor consequat id. A erat nam at lectus urna duis convallis convallis tellus. Consectetur lorem donec massa sapien faucibus
    et. Vitae proin sagittis nisl rhoncus mattis rhoncus. Ornare aenean euismod elementum nisi quis eleifend. Et netus et malesuada fames. Enim nunc faucibus a pellentesque sit amet porttitor eget. Elit scelerisque mauris pellentesque pulvinar pellentesque
    habitant morbi. Viverra adipiscing at in tellus integer feugiat. Vulputate odio ut enim blandit volutpat maecenas volutpat blandit aliquam. Purus viverra accumsan in nisl nisi scelerisque eu. Sit amet luctus venenatis lectus magna fringilla urna.
    Malesuada nunc vel risus commodo. Eleifend quam adipiscing vitae proin sagittis nisl. Cras ornare arcu dui vivamus arcu. Sed augue lacus viverra vitae congue eu consequat ac. Egestas pretium aenean pharetra magna ac placerat vestibulum lectus. Et
    egestas quis ipsum suspendisse ultrices gravida dictum fusce. Duis convallis convallis tellus id interdum velit laoreet id donec. Tellus molestie nunc non blandit massa enim nec dui. Tincidunt praesent semper feugiat nibh sed pulvinar proin gravida.
    Habitasse platea dictumst quisque sagittis purus sit amet. Cursus metus aliquam eleifend mi in. Suscipit tellus mauris a diam maecenas sed. Euismod elementum nisi quis eleifend quam adipiscing vitae proin. Aliquet nibh praesent tristique magna sit
    amet. Vehicula ipsum a arcu cursus vitae. Sed ullamcorper morbi tincidunt ornare massa eget egestas purus viverra. Nulla pellentesque dignissim enim sit amet venenatis urna cursus eget. Mauris augue neque gravida in fermentum et sollicitudin ac. Pellentesque
    elit eget gravida cum sociis natoque penatibus et. Velit laoreet id donec ultrices tincidunt arcu. Viverra vitae congue eu consequat ac felis donec et odio. Cursus in hac habitasse platea dictumst quisque. Et tortor consequat id porta nibh venenatis.
    Placerat in egestas erat imperdiet sed euismod nisi. Morbi leo urna molestie at elementum eu facilisis. Sed egestas egestas fringilla phasellus. Arcu dui vivamus arcu felis bibendum ut tristique et. Tempus urna et pharetra pharetra massa massa ultricies
    mi. Nisl vel pretium lectus quam.</div>



</body>

很简单。

但是，如果我希望图像显示为与文本的底部对齐，那么它在右下角并且周围包裹了文本，该怎么办？我相信形状外部仍需要浮子，但使用浮子时不能垂直对齐。有什么建议？谢谢。

陪同Afif

您需要套用上边距。很难找到好的价值，但是您可以使用vw单位来近似。您可能需要JS来获得理想的值，或者需要一些媒体查询来针对不同的分辨率调整该值：

.element {
  shape-outside: url(https://i.ibb.co/44KLGpq/marginalia-susan-transparent.png);
  shape-image-threshold: 0.5;
  float: right;
  height: 300px;
  shape-margin: 1em;
  margin-top: max(0px,calc(1000px - 95vw));
}

body {
 text-align:justify;
}

<body><img class="element" src="https://i.ibb.co/44KLGpq/marginalia-susan-transparent.png">
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Venenatis urna cursus eget nunc scelerisque viverra mauris in. Sagittis purus sit amet volutpat. Sollicitudin tempor id eu nisl
    nunc mi ipsum. Eleifend mi in nulla posuere sollicitudin. Ac placerat vestibulum lectus mauris ultrices eros in cursus turpis. Suscipit tellus mauris a diam maecenas. Congue mauris rhoncus aenean vel elit scelerisque. Hac habitasse platea dictumst
    quisque. Semper quis lectus nulla at volutpat. Tincidunt augue interdum velit euismod. Sit amet aliquam id diam maecenas. Sem et tortor consequat id. A erat nam at lectus urna duis convallis convallis tellus. Consectetur lorem donec massa sapien faucibus
    et. Vitae proin sagittis nisl rhoncus mattis rhoncus. Ornare aenean euismod elementum nisi quis eleifend. Et netus et malesuada fames. Enim nunc faucibus a pellentesque sit amet porttitor eget. Elit scelerisque mauris pellentesque pulvinar pellentesque
    habitant morbi. Viverra adipiscing at in tellus integer feugiat. Vulputate odio ut enim blandit volutpat maecenas volutpat blandit aliquam. Purus viverra accumsan in nisl nisi scelerisque eu. Sit amet luctus venenatis lectus magna fringilla urna.
    Malesuada nunc vel risus commodo. Eleifend quam adipiscing vitae proin sagittis nisl. Cras ornare arcu dui vivamus arcu. Sed augue lacus viverra vitae congue eu consequat ac. Egestas pretium aenean pharetra magna ac placerat vestibulum lectus. Et
    egestas quis ipsum suspendisse ultrices gravida dictum fusce. Duis convallis convallis tellus id interdum velit laoreet id donec. Tellus molestie nunc non blandit massa enim nec dui. Tincidunt praesent semper feugiat nibh sed pulvinar proin gravida.
    Habitasse platea dictumst quisque sagittis purus sit amet. Cursus metus aliquam eleifend mi in. Suscipit tellus mauris a diam maecenas sed. Euismod elementum nisi quis eleifend quam adipiscing vitae proin. Aliquet nibh praesent tristique magna sit
    amet. Vehicula ipsum a arcu cursus vitae. Sed ullamcorper morbi tincidunt ornare massa eget egestas purus viverra. Nulla pellentesque dignissim enim sit amet venenatis urna cursus eget. Mauris augue neque gravida in fermentum et sollicitudin ac. Pellentesque
    elit eget gravida cum sociis natoque penatibus et. Velit laoreet id donec ultrices tincidunt arcu. Viverra vitae congue eu consequat ac felis donec et odio. Cursus in hac habitasse platea dictumst quisque. Et tortor consequat id porta nibh venenatis.
    Placerat in egestas erat imperdiet sed euismod nisi. Morbi leo urna molestie at elementum eu facilisis. Sed egestas egestas fringilla phasellus. Arcu dui vivamus arcu felis bibendum ut tristique et. Tempus urna et pharetra pharetra massa massa ultricies
    mi. Nisl vel pretium lectus quam.</div>



</body>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。