Как вы выравниваете текст динамической длины по вертикали, одновременно оборачивая его вокруг плавающего изображения?
Я пытаюсь настроить 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>
Я пробовал display table и flexbox, но они обрабатывают изображение и текст как отдельные блоки и не позволяют длинному тексту обтекать изображение. Фиксированная высота также не работает, поскольку текст имеет переменную длину и может быть несколько строк, которые необходимо выровнять по вертикали, прежде чем они начнут обтекать изображение.
Я установил рабочий пример с результатом, который я пытаюсь получить. Он использует два разных жестко закодированных стиля, но я пытаюсь найти единственное решение, которое будет работать независимо от того, сколько текста предоставлено.
Есть ли способ обойти это без какого-либо взлома javascript?
Нет, упаковка не главная проблема. Изображение уже плавает. Проблема заключается в том, что одна или две строки текста (недостаточно для переноса) вертикально выравниваются внутри контейнера, не нарушая эффекта переноса.
Ответы 1
Решение этой проблемы состоит в том, чтобы обернуть содержимое оболочкой, чтобы оно не наследовало свойства 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>Это не похоже на вертикальное выравнивание одной строки текста.
ах, я предположил, что первые 2 примера были положительными результатами. Читается как-то смешно. Позвольте мне вернуться к @CSturgess
Ах, мой плохой. Я отредактирую скрипку, чтобы дать больше разъяснений.
Теперь я вижу, я не уверен, что вы можете удовлетворить оба требования в одном наборе правил @CSturgess, или, по крайней мере, я не знаю, как это сделать. Единственное, что я могу придумать, это vertical-align для встроенного элемента. <p> не являются встроенными по своей природе. Однако я не думаю, что это будет хорошо выглядеть, потому что было бы трудно оценить, сколько строк находится во «встроенном» элементе. хотя я обновлю
да, это некрасиво @CSturgess, лол. Но это хороший вызов! Я еще подумаю об этом и рассмотрю некоторые документы. С нетерпением жду, что другие люди тоже предоставят
Взгляните на stackoverflow.com/questions/19179424/… Это то, что вы хотите?