gpt4 book ai didi

html - 如何将一张图片对齐到另一张图片的底部?

转载 作者:太空宇宙 更新时间:2023-11-03 23:10:58 25 4
gpt4 key购买 nike

如何对齐浣熊图片使其出现在大圆图的右下角?如图所示。

我试过 background-position: bottom right;以及position:absolute;但它不起作用。

请参阅下面的代码。

谢谢。

enter image description here

.p-i--1 {
background-image: url(http://www.zerohedge.com/sites/default/files/pictures/picture-3930.jpg);
}
.p-i {
border-radius: 50%;
background-position: bottom right;
width: 40px;
height: 40px;
position: absolute;
}
.p-1 {
float: left;
width: 220px;
height: 100%;
position: relative;
}
.p-wrap {
bottom: 0;
width: 100%;
text-align: center;
}
.pic-wrap {
width: 122px;
height: 122px;
margin: 0 auto;
}
.p_pic-1 {
background-image: url(http://www.fernomortuary.com/~/media/products-mortuary/swatches/Swatch_Burgundy.ashx?w=122);
background-position: center;
float: left;
width: 122px;
height: 122px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.p-description {
font-family: Roboto;
font-weight: 300;
color: #666;
font-size: 14px;
text-align: center;
float: left;
margin-top: 0;
}
.p-name {
text-align: center;
}
<div class="p-1">
<div class="p-i--1 p-i"></div>
<div class="pic-wrap">
<a class="p_pic-1" href="index.html"></a>
</div>
<div class="p_wrap">
<h4 class="p-name">Some text</h4>
<p class="p-description">Some very very very very long description</p>
</div>
</div>

最佳答案

将较小的图片放在 .pic-wrap 中。给它一个 absolute 位置并使用 bottomright 属性对齐它:

JS Fiddle

所做的 CSS 更改:

.pic-wrap {
position: relative;
}
.p-i {
position: absolute;
bottom: 0;
right: 0;
}

如果你想要小图片周围的白色边框:

.p-i { 
border: 3px solid white;
}

JS Fiddle

关于html - 如何将一张图片对齐到另一张图片的底部?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32593839/

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