У меня есть текст с двумя плавающими вокруг него изображениями:

<!--This is obviously a simplified version, there are other styles needed for the images below-->
<div id="wrapper">
    <h2>Title</h2>
    
    <figure id="image1" style="float: left">
        <img />
        <figcaption>Caption</figcaption>
    </figure>
    
    <figure id="image2" style="float: right">
        <img />
        <figcaption>Caption</figcaption>
    </figure>
    
    <p>Lorem Ipsum</p>
</div>

Вот как это выглядит:

Actual CSS

Я бы хотел, чтобы первое или второе изображение располагалось в самом низу абзаца. Примерно так (сделано в фотошопе):

What I would like


Я, очевидно, не могу установить position: absolute, так как текст больше не будет плавать вокруг изображения.

Я не могу отобразить оболочку как flexbox, поскольку она выравнивает элементы в одной строке (или нескольких строках) и разбивает все:

Using Flexbox

Я даже попытался отобразить оболочку как table и выровнять фигуру по нижнему краю с помощью display: table-cell; vertical-align: bottom, но float в этом случае больше не работает, и фигура выровнена по центру.


Единственное частичное решение, которое мне удалось получить, это использование clear: both на рисунке:

Clear: both

Проблема в том, что при изменении размера страницы изменяется высота абзаца, изображение больше не находится внизу.


Единственный подобный ответ, который я смог найти на SO, был этот, но в моем случае это не сработало, так как я не знаю заранее высоту абзаца.

Есть идеи, как заставить его работать? Заранее спасибо.

1
Simo Pelle 10 Фев 2021 в 16:20

1 ответ

Лучший ответ

Вы можете сделать это с помощью shape-outside.

.container {
  display: flex;/* I need this to use height:100% */
}

#image2 {
  height: 100%; /* take full height */
  float: right;
  /* the below will allow the text to wrap around */
  shape-outside: inset(calc(100% - 135px) 0 0 0); /* 135px is an approximation of the figure height */
  /* move image and caption to bottom (the area kept by shape-outside) */
  display: flex;
  flex-direction: column;
  justify-content:flex-end;
}

#wrapper {
  font-size: 20px;
  text-align: justify;
}

figure {
  margin: 10px;
  text-align: center;
  float: left;
}

p {
  margin: 0;
}
<div class="container">
  <div id="wrapper">
    <figure id="image1">
      <img src="https://picsum.photos/id/1/100/100">
      <figcaption>Caption</figcaption>
    </figure>

    <figure id="image2">
      <img src="https://picsum.photos/id/1/100/100">
      <figcaption>Caption</figcaption>
    </figure>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nunc ante, cursus ac aliquet id, aliquet vitae orci. Sed faucibus, lorem a dictum iaculis, quam dolor aliquam mauris, eu dapibus ligula tellus quis urna. Maecenas sed justo pharetra,
      fringilla ex a, scelerisque justo. Quisque augue tellus, volutpat vel suscipit et, porta eget neque. Mauris pretium nunc in augue porta, sed egestas risus scelerisque. Nullam tortor nisl, suscipit a enim sit amet, rutrum maximus mauris. Nullam maximus
      lectus ac magna suscipit, nec efficitur nunc finibus. Curabitur malesuada orci nec semper elementum. Sed dignissim, tortor vitae rhoncus tempor, arcu mi facilisis nibh, vel consequat odio ipsum non augue. Sed diam est, facilisis ut cursus eu  rhoncus tempor, arcu mi facilisis nibh, vel consequat odio ipsum non augue. </p>
  </div>
</div>

Связанные для более подробной информации: https://dev.to/afif/float -to-the-bottom-corners-i8l

3
Temani Afif 17 Фев 2021 в 09:21