gpt4 book ai didi

html - translateY(-50%)后如何调整父div的高度

转载 作者:行者123 更新时间:2023-12-05 06:16:54 29 4
gpt4 key购买 nike

我在使用引导卡时遇到问题。我使用了 transform: translateY(-50%); 将元素平移到 y 轴,我已经将父 div 的高度设置为自动,但问题是在平移之后元素,我希望高度应该自动调整。

这是html

<div class="card layer-1-left-sub">
<img class="card-img-top profile-icon" src="images/profile-boy.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>

这是我的CSS

.layer-1-left-sub{
padding: 3px;
border: 2px solid #3f51b5;
border-radius: 5px;
margin: 0 auto;
float: none;
height: auto;
}

.profile-icon{
bottom: 0;
right: 0;
left: 0;
width: 150px;
height: 150px;
transform: translateY(-50%);
margin: 0 auto;
float: none;
display: block;
border-radius: 50%;
border: 2px solid #fff;
}

这就是我面临的问题

enter image description here

图片和段落之间有多余的空格,我想去掉多余的空格

最佳答案

使用转换属性更新!

 .layer-1-left-sub{
padding: 3px;
border: 2px solid #3f51b5;
border-radius: 5px;
margin: 0 auto;
float: none;
text-align: center;
position: relative;
}

.profile-icon{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -100%);
width: 150px;
height: 150px;
display: block;
border-radius: 50%;
border: 2px solid #fff;
}

.card-text {
margin-top: 100px;
}
  <div class="card layer-1-left-sub" style="margin-top:100px">
<img class="card-img-top profile-icon" src=" https://pbs.twimg.com/profile_images/758084549821730820/_HYHtD8F.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>

我解决了你的问题。我使用了 Display flex 并删除了一些不必要的 css 属性。如果您以这种方式使用它,您将拥有更简洁的样式,而无需处理绝对位置

 .layer-1-left-sub{
padding: 3px;
border: 2px solid #3f51b5;
border-radius: 5px;
margin: 0 auto;
float: none;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}

.profile-icon{
margin-top: -80px;
width: 150px;
height: 150px;
display: block;
border-radius: 50%;
border: 2px solid #fff;
}
  <div class="card layer-1-left-sub" style="margin-top:100px">
<img class="card-img-top profile-icon" src=" https://pbs.twimg.com/profile_images/758084549821730820/_HYHtD8F.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>

关于html - translateY(-50%)后如何调整父div的高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61901206/

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