css - 使用shape-outside包装时如何将img与文本底部对齐

问题描述

我一直在玩 shape-outside 并在这里有一个示例： 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>

很简单。

但是，如果我希望图像显示为与文本底部对齐，所以它位于右下角，文本环绕在它周围怎么办？我相信，形状外部仍然需要浮动，但使用浮动时不能垂直对齐。有什么建议么？谢谢。

标签： cssvertical-alignment

解决方案

您需要应用上边距。很难找到好的值，但您可以使用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>

css - 使用shape-outside包装时如何将img与文本底部对齐

问题描述

解决方案

推荐阅读