gpt4 book ai didi

html - Bootstrap 5 将列内的图像对齐到底部

转载 作者:行者123 更新时间:2023-12-05 02:39:41 25 4
gpt4 key购买 nike

我想问一个关于在 Bootstrap 5 中将列内的图像与底部对齐的问题。

下面是一个使用 Bootstrap 5 的 CDN 创建两列的 HTML 片段,每列包含一张伦敦的图像,附有 img-fluid 以获得 max-width:100%height: auto:

<!DOCTYPE html>
<html>
<head>
<title>Column img align-bottom demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h2>Column img align-bottom demo</h2>
<div class="row g-2">
<div class="col-md border">
<img src="https://static.homesandproperty.co.uk/s3fs-public/thumbnails/image/2020/11/19/10/HotNotGoodLuckHope.jpg?width=990&auto=webp&quality=75&crop=968%3A645%2Csmart" class="img-fluid">
</div>
<div class="col-md border">
<img src="https://london.ac.uk/sites/default/files/styles/max_1300x1300/public/2018-10/london-aerial-cityscape-river-thames_1.jpg?itok=6LenFxuz" class="img-fluid" alt="">
</div>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</html>

如您所见,右侧的照片与列的顶部对齐,而我希望它与列的底部对齐。

Screenshot showing RHS aligned to the top of the column, rather than the bottom

我已经通过 Bootstrap Vertical Align Documentation 尝试了以下解决方案通过将 align-bottom 添加到图像类本身(图像来源于知识共享许可用于教育目的):

<div class="col-md border">
<img src="https://london.ac.uk/sites/default/files/styles/max_1300x1300/public/2018-10/london-aerial-cityscape-river-thames_1.jpg?itok=6LenFxuz" class="img-fluid align-bottom" alt="">
</div>

但这行不通。

如何将右侧图像推送到父​​ div 的底部?

最佳答案

在列上使用align-self-end...

<div class="container">
<h2>Column img align-bottom demo</h2>
<div class="row g-2">
<div class="col-md border">
<img src="https://static.homesandproperty.co.uk/s3fs-public/thumbnails/image/2020/11/19/10/HotNotGoodLuckHope.jpg?width=990&auto=webp&quality=75&crop=968%3A645%2Csmart" class="img-fluid">
</div>
<div class="col-md border align-self-end">
<img src="https://london.ac.uk/sites/default/files/styles/max_1300x1300/public/2018-10/london-aerial-cityscape-river-thames_1.jpg?itok=6LenFxuz" class="img-fluid" alt="">
</div>
</div>
</div>

https://codeply.com/p/WOLEhJvtqV

关于html - Bootstrap 5 将列内的图像对齐到底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68984961/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com