使用 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>
我的文本在右側對齊，但如果文本很長，我會在影像下方留出空白空間。如何用文字填充影像下方的區域？
提前致謝！
uj5u.com熱心網友回復：
由于您正在尋找浮動解決方案，因此您不需要 d-flex。只使影像向左浮動，而不是文本。
不知道你的item_image_left_aligned課是做什么的。
<div>
<div class="float-start">
<img class="item_image_left_aligned" :src="itemDetailsImage.url" />
</div>
<div>
<div v-html="itemDetails.description"></div>
</div>
</div>
uj5u.com熱心網友回復：
這是你想要的。我已將h-100引導類添加到影像中。
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/450777.html