是否可以為右浮動影像提供填充底部以填充剩余父級的 div 高度？背景：應避免影像下方的線條。在我的示例 padding: 100% 中，可以滿足我的需要。它將下面的線推到左邊。但是，填充已超出其父 div 高度（紅線）。不幸的是，我只能對標記做很少的改動。
div {
border: 1px solid red;
}
.alignright {
display: block;
margin-left: 20px;
float: right;
padding-bottom: 100%;
border: 1px solid green;
}<div>
<img src="https://dummyimage.com/150x100/000/fff" width="100px" class="alignright" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.Phasellus viverra nulla ut metus varius laoreet. </div>uj5u.com熱心網友回復：
為您的布局使用 CSS 網格：
div {
border: 1px solid red;
display: grid;
grid-auto-flow:dense;
}
.alignright {
grid-column: 2; /* put the image on the right */
margin-left: 20px;
border: 1px solid green;
}<div>
<img src="https://dummyimage.com/150x100/000/fff" width="100px" class="alignright">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae,
justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in,
viverra quis, feugiat a, tellus.Phasellus viverra nulla ut metus varius laoreet. </div>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/414275.html
標籤：