应用对齐时如何用文本填充图像下方的区域？

Question

使用 Vuejs 和 Bootstrap v5.0.1 我将图像左对齐，文本右对齐，并使用代码：

        <div class="d-flex">
            <div class="float-start">
                <img class="  item_image_left_aligned" :src="itemDetailsImage.url" >
            </div>
            <div class="float-end">
                <div v-html="itemDetails.description"></div>
            </div>
        </div>

我的文字右对齐，但如果文字很长，space 下方的图片是空的。如何用文字填充图像下方的区域？

提前致谢！

Answer 1

由于您正在寻找浮动解决方案，因此不需要 d-flex。只让图片左飘，文字不飘

不确定您的 item_image_left_aligned class 是做什么的。

<div>
    <div class="float-start">
        <img class="item_image_left_aligned" :src="itemDetailsImage.url" />
    </div>
    <div>
        <div v-html="itemDetails.description"></div>
    </div>
</div>

Answer 2

这是您要找的吗？我已将 h-100 bootstrap class 添加到图像中。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex">
    <div class="float-start">
        <img class="  item_image_left_aligned h-100 " width="100" src="https://dummyimage.com/100x100/000/fff" >
    </div>
    <div class="float-end">
        <div v-html="itemDetails.description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

</div>
    </div>
</div>

应用对齐时如何用文本填充图像下方的区域？

How to fill area under image with text when align applied?

css

twitter-bootstrap