字体环绕图片效果

标签结构

<div className="d_introduce_wrapper">
    <p className='d_introduce'>
        <Image
            className='d_introduce_img'
            src={`/images/ich-img/detail-img.png`}
            alt='detail'
            width={0}
            height={0}
            sizes='100vw'
        /> 
                    长太息以掩涕兮，哀民生之多艰。
                    余虽好修姱以鞿羁兮，謇朝谇而夕替。
                    既替余以蕙纕兮，又申之以揽茝。
                    亦余心之所善兮，虽九死其犹未悔。
                    怨灵修之浩荡兮，终不察夫民心。
                    众女嫉余之蛾眉兮，谣诼谓余以善淫。
                    固时俗之工巧兮，偭规矩而改错。
                    背绳墨以追曲兮，竞周容以为度。
                    忳郁邑余侘傺兮，吾独穷困乎此时也。
                    宁溘死以流亡兮，余不忍为此态也。
                    鸷鸟之不群兮，自前世而固然。
                    何方圜之能周兮，夫孰异道而相安？
                    屈心而抑志兮，忍尤而攘诟。
                    伏清白以死直兮，固前圣之所厚。
                    悔相道之不察兮，延伫乎吾将反。
                    回朕车以复路兮，及行迷之未远。
                    步余马于兰皋兮，驰椒丘且焉止息。
    </p>
 </div>

css样式

// 文本环绕图片
    .d_introduce_wrapper {
        width: 100vw;
        display: flex;
        align-items: flex-start; // 确保文本和图片在顶部对齐

        .d_introduce {
            flex-grow: 1; // 让文本部分自动扩展宽度
            margin: 20px; // 与图片部分保持一定间距
        }

        .d_introduce_img {
            width: 39.1vw;
            height: auto;
            float: right;
            margin: 3vw;
        }
    }

效果展示