Как вы вертикально выравниваете текст динамической длины, в то же время оборачивая его вокруг плавающего изображения? - PullRequest
Новая
       12

Как вы вертикально выравниваете текст динамической длины, в то же время оборачивая его вокруг плавающего изображения?

0 голосов
/ 20 февраля 2019

Я пытаюсь настроить div, который содержит изображение, плавающее слева вверху, и текст неизвестной длины.Цель состоит в том, чтобы текст был отцентрирован по центру элемента div, если он меньше изображения, или обтекание вокруг изображения, если его достаточно.

Мой общий макет: 

<div class="wrapper">
  <img src="http://placekitten.com/50/50" class="image" style="float: left">
  <p class="text">
    Text goes here
  </p>
</div>

Я пробовал отображать таблицу и flexbox, но они обрабатывают изображение и текст как отдельные блоки и предотвращают наложение длинного текста на изображение.Фиксированная высота также не работает, так как текст имеет переменную длину, и может быть несколько строк, которые необходимо выровнять по вертикали, прежде чем он начнет обтекать изображение.

Я установил скрипку с результатом я пытаюсь получить.В нем используются два разных жестко запрограммированных стиля, но я пытаюсь найти единственное решение, которое будет работать независимо от объема предоставленного текста.

Есть ли способ обойти это без какого-либо взлома JavaScript?

1 Ответ

0 голосов
/ 21 февраля 2019

Решение этой проблемы - обернуть содержимое оболочкой, чтобы оно не наследовало свойства flex как прямой потомок.Это также дает вам некоторую гибкость при использовании flex по мере необходимости. 

.wrapper {
  border: 1px solid black;
  padding: 0;
  overflow: auto;
  display: flex;
}

.image {
  vertical-align: middle;
}

.text {
  margin: 0;
}

.content {
  flex: 1;
}

.content p {
  display: inline;
  vertical-align: middle;
}
<p>
  This text should be centered vertically:
</p>

<div class="wrapper">
  <div class="content">
    <img src="http://placekitten.com/50/50" class="image">
    <p class="text">
      A little bit of text!
    </p>
  </div>
</div>

<p>
  This text should wrap around the image, going underneath it:
</p>

<div class="wrapper">
  <div class="content">
    <img src="http://placekitten.com/50/50" class="image">
    <p class="text">
      A lot of text! I mean a whole lot! Like tons and tons! You won't believe how much text. It's still going even. How is it still going? Who knows, but it's doing it! Oh wow it just isn't stopping. So much text! It's still going even. How is it still going?
      Who knows, but it's doing it! Oh wow it just isn't stopping. So much text! It's still going even. How is it still going? Who knows, but it's doing it! Oh wow it just isn't stopping. So much text! It's still going even. How is it still going? Who
      knows, but it's doing it! Oh wow it just isn't stopping. So much text! It's still going even. How is it still going? Who knows, but it's doing it! Oh wow it just isn't stopping. So much text! Oh wait, it's over.
    </p>
  </div>
</div>

<p>
  This is what I'm trying to avoid:
</p>

<div class="wrapper">
  <div class="content">
    <img src="http://placekitten.com/50/50" class="image">
    <p class="text">
      A lot of text! I mean a whole lot! Like tons and tons! You won't believe how much text. It's still going even. How is it still going? Who knows, but it's doing it! Oh wow it just isn't stopping. So much text! It's still going even. How is it still going?
      Who knows, but it's doing it! Oh wow it just isn't stopping. So much text! It's still going even. How is it still going? Who knows, but it's doing it! Oh wow it just isn't stopping. So much text! It's still going even. How is it still going? Who
      knows, but it's doing it! Oh wow it just isn't stopping. So much text! It's still going even. How is it still going? Who knows, but it's doing it! Oh wow it just isn't stopping. So much text! Oh wait, it's over.
    </p>
  </div>
</div>
...