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

avatar
melody_florum
9 августа 2021 в 00:35
115
3
3

Я не совсем уверен, как описать это лучше, чем название, поэтому я просто нарисую его.

На изображениях ниже горизонтальные линии — это «текст», маленькое поле — это изображение, а большее поле — вся веб-страница. Я хочу, чтобы текст вел себя так же, как на рисунках, но понятия не имею, как это сделать.

vertically centered text next to an image

text wrapping around a floating image

Я могу сделать так, чтобы текст обтекал изображение, используя float, и я могу отцентровать текст по вертикали, используя flexbox или grid или table, но я не могу сделать и то, и другое одновременно . Использование любого из этих методов вертикального центрирования текста приводит к ошибке очистки, и они в основном обрабатывают height:100% так, как будто изображения не было.

parent of text that needs to be vertically centered obeys clearfix

child does not obey clearfix

Источник
Faisal
9 августа 2021 в 02:44
0

Отвечает ли это на ваш вопрос? Как разместить текст и изображение рядом друг с другом в HTML?

Ответы (3)

avatar
Raeesh Alam
9 августа 2021 в 07:09
1

Вы можете добиться этого с помощью свойств float и flex. Таким образом, вам нужно будет проверить динамически небольшой объем текста, если он существует, затем добавить класс .box-flex в .box, если объем текста больше, то не нужно добавлять класс .box-flex.
С дисплеем flex я использую свойство order для преобразования div изображения из left в right.

Я надеюсь, что фрагмент ниже вам очень поможет.

*{box-sizing: border-box;}
.box{
    font-family: Arial;
    font-size: 16px;
    line-height: 22px;
    width: 100%;
    max-width: 480px;
    min-height: 100px;
    background-color: rgb(148, 206, 203);
    padding: 15px;
    margin: 15px auto 15px auto;
    color: #333;
    border-radius: 8px;
}
.img{
    width: 100px;
    height: 100px;
    min-width: 100px;
    max-width: 100px;
    max-height: 100px;
    background: coral;
    margin-left: 12px;
    float: right;
    border-radius: 4px;
}
.txt{
    position: relative;
    min-height: inherit;
    padding: 0;
    text-align: justify;
}
.box-flex{
    display: flex;
    justify-content: space-between;
}
.box-flex .img{
    order: 1;
}
.box-flex .txt{
    padding: 0;
    align-self: center;
    min-height: auto;
}
<div class="box box-flex">
    <div class="img"></div>
    <div class="txt">
        If small amout of text (use .box-flex)
    </div>
</div>
<div class="box">
    <div class="img"></div>
    <div class="txt">
        Lorem ipsum dolor sit amet conse ctetur adipis icing elit. Unde adipisci soluta beatae minima, dolores atque voluptas, explicabo mollitia, sunt alias nihil dolo ribus veritatis perfe rendis quib usdam error exerci ationem quia conseq uuntur eos digni ssimos sed veniam? Rerum saepe qui sed corporis volupt atibus soluta quo eaque. Quidem recu sandae dolorum nesciunt Rerum saepe qui sed.
    </div>
</div>
melody_florum
9 августа 2021 в 22:27
2

document.querySelectorAll(".box").forEach((elem) => { let img = elem.querySelector(".img"); let txt = elem.querySelector(".txt"); if (img.offsetHeight > txt.offsetHeight) { elem.classList.add("box-flex") } else { elem.classList.remove("box-flex") } }) написал это, чтобы применить правильный класс к ящику

Raeesh Alam
10 августа 2021 в 04:08
1

@melody_florum :) Я использовал ваш скрипт здесь codepen.io/raeesh/pen/ZEKVJmM и удалил несколько строк из стиля CSS.

avatar
Brett Donald
9 августа 2021 в 03:57
1
Здесь поможет

Исключения CSS: они позволяют обтекать текстом любой элемент, включая абсолютно позиционированный элемент. К сожалению, эта спецификация все еще находится в рабочем состоянии, и ни один браузер пока не поддерживает ее.

Вот фрагмент, иллюстрирующий, как CSS-исключения могут быть вам полезны. Как видите, здесь используется абсолютное позиционирование, а не плавающее, и все работает так, как вы хотите, за исключением того, что текст не переносится. Правило исключения wrap-flow, к сожалению, не действует.

.d1 {
    position: relative;
    border: 2px solid cyan;
    min-height: 200px;
    margin-bottom: 2em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 1em;
}
.excl {
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height:200px;
    background-color: lime;
    wrap-flow: both;
}
<div class="d1">
    <div class="excl"></div>
    <div class="txt">
        <p>
            Lorem ipsum 
        </p>
        <p>
            Nunc eu 
        </p>
    </div>
</div>
<div class="d1">
    <div class="excl"></div>
    <div class="txt">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse odio massa, tempor auctor posuere et, consequat non velit. Suspendisse potenti. Proin hendrerit eu neque id varius. Morbi consequat dui neque, non fringilla dolor pretium vitae. Pellentesque congue nec justo vel mattis. Fusce lobortis turpis a urna elementum eleifend. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla rhoncus sagittis lacus at dignissim.
        </p>
        <p>
            Nunc eu rhoncus massa. Nam pretium pellentesque faucibus. Mauris fringilla erat et nunc feugiat hendrerit. Nullam bibendum faucibus quam ut rhoncus. Maecenas non orci dui. Suspendisse maximus feugiat augue, sit amet ultrices arcu egestas at. Phasellus eget libero purus. Suspendisse potenti. Nulla vestibulum diam at pharetra vehicula. Donec quis dignissim tellus. In dictum sagittis ex, euismod ultricies leo tempor vel.
        </p>
        <p>
            Donec consectetur facilisis neque, eu dignissim massa interdum vel. Fusce vestibulum libero a ex malesuada, et pharetra risus gravida. Duis vehicula, dolor ut mattis sagittis, metus ex lacinia velit, sed interdum magna nisi eu magna. Aenean porttitor pulvinar lectus, sit amet efficitur ligula suscipit ut. Vivamus lobortis, felis at ultrices eleifend, risus ex ullamcorper lacus, nec aliquam orci sapien vitae elit. Suspendisse vitae nunc ante. Curabitur consequat diam et enim varius, quis mattis lectus posuere. Quisque sollicitudin, eros ut aliquet gravida, ipsum lectus consequat arcu, ac congue libero ante nec tellus. Mauris massa dolor, dapibus a metus eu, vehicula ultricies justo. Integer eu turpis non mauris finibus congue. Donec rhoncus felis in elit tempor lacinia. Ut placerat sodales libero, in laoreet nibh commodo quis.
        </p>
        <p>
            Aliquam in lacus tempor, viverra quam in, interdum lorem. Aliquam bibendum, sem eget egestas iaculis, velit urna finibus est, a dapibus nulla orci at nibh. Cras eget ullamcorper nisl. Vivamus maximus, lorem a rutrum semper, eros orci auctor urna, a pharetra enim felis id arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nam vitae consequat ipsum. Quisque egestas viverra elit, vel pulvinar enim. Vestibulum faucibus mattis sem sed placerat. Fusce pretium, mauris eget facilisis lobortis, lectus enim finibus lacus, a finibus orci odio at ante. Nullam non tincidunt turpis, ut tempor dolor. Aliquam sit amet augue eu orci cursus pulvinar eleifend et lacus. Nam imperdiet lectus quis urna fringilla convallis. Mauris pretium fringilla iaculis. Donec volutpat lacus urna, in convallis nisi tincidunt luctus. Maecenas ut augue metus. Aenean ornare erat eu auctor volutpat.
        </p>
        <p>
            Praesent a odio enim. Proin tincidunt vulputate nibh, eget rhoncus arcu vulputate ultricies. Etiam nec magna nec est pharetra aliquet. Vivamus rhoncus convallis lectus at rhoncus. Nam elit risus, volutpat sit amet erat sit amet, fringilla tempus erat. Donec id diam sodales metus rutrum molestie eu ac erat. Mauris condimentum erat nec leo venenatis sodales. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin quis sem mattis, pellentesque dui id, imperdiet justo. Donec id iaculis ante. Morbi maximus nibh eget convallis cursus. Suspendisse tristique felis et tempus vulputate. Morbi id tincidunt sem, eget vestibulum tortor.
        </p>
    </div>
</div>

Тем временем одно из предложений состоит в том, чтобы использовать flexbox, когда у вас есть только небольшое количество текста рядом с изображением, и использовать float, когда у вас есть больше текста. В противном случае вам просто придется выбирать между float или flex и жить с этим не совсем правильно, или выбрать другой вид.

melody_florum
9 августа 2021 в 06:15
0

по какой-то причине IE 10-11 и Edge 12-18 поддерживают его, но мне это не помогает, так как я использую chrome + selenium, в любом случае ваше предложение о динамическом выборе между flexbox и float, вероятно, сработает для меня, спасибо!

avatar
Ahmed Ibrahim
9 августа 2021 в 03:24
-2

вы можете использовать position : относительный (для текста) верх: 50% преобразование:перевестиY(-50%)

это центрирует текст в центре div по вертикали или вы можете используйте вертикальное выравнивание как для изображения, так и для текста вертикальное выравнивание: среднее

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

Brett Donald
9 августа 2021 в 05:35
1

Вы пропустили часть float/wrap. Вопрос в том, как совместить плавание (и обертывание) с вертикальным центрированием.