![](/img/trans.png)
[英]How do I make a child of an absolutely positioned div stick to the bottom of it's absolutely positioned parent?
[英]How to make parent element the same size as his child which is absolutely positioned to his grandparent?
我有一個祖父母div .grandparent
其中的圖像元素.child-image
相對於.grandparent
絕對定位。 我希望包裝元素.parent-wrapper
(用於包裝圖像)具有與其子.child-image
相同的寬度和高度。 可能嗎? 我嘗試了幾乎所有內容,但仍然無法解決。
這是codepen: https ://codepen.io/anon/pen/MRNwoJ ? editors = 1100
.grandparent { height: 650px; max-height: calc(100vh - 100px); width: 642px; position: relative; display: inline-block; float: left; padding: 0; margin: 0 0 25px 0; background-color: #464646; text-align: center; } .parent-wrapper { height: unset; max-height: calc(100vh - 300px); background-color: red; float: left; } .child-image { display: block; margin: 0 auto; min-height: 1px; height: auto; width: auto; max-height: 100%; max-width: 100%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); cursor: unset; }
<div class="grandparent"> <div class="parent-wrapper"> <img class="child-image" src="https://cfl.dropboxstatic.com/static/images/index/rebrand/co_create/desktop/dropbox_digital_desktop_02-vflq-5NiU.jpg"> </div> </div>
從子圖像中刪除絕對位置並將其分配給父div,這樣,父div將具有與子圖像相同的位置和大小。
.grandparent {
height: 650px;
max-height: calc(100vh - 100px);
width: 642px;
display: inline-block;
float: left;
padding: 0;
margin: 0 0 25px 0;
background-color: #464646;
text-align: center;
position: relative;
}
.parent-wrapper {
height: 100;
max-height: calc(100vh - 300px);
background-color: red;
position: absolute;
height: auto;
width: auto;
max-height: 100%;
max-width: 100%;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
margin: 0 auto;
}
.child-image {
display: block;
min-height: 1px;
cursor: unset;
}
我不知道你為什么要把這些復雜化。 我已經以更簡單的形式更改了代碼,希望這就是您想要的。 如果您想要其他特定的東西,請發表評論。
.grandparent { display: flex; align-items: center; justify-content: center; height: 650px; width: 100%; margin: 0 0 25px 0; background-color: #464646; text-align: center; } .parent-wrapper { display: inline-block; } img { max-width: 100%; }
<div class="grandparent"> <div class="parent-wrapper"> <img class="child-image" src="https://cfl.dropboxstatic.com/static/images/index/rebrand/co_create/desktop/dropbox_digital_desktop_02-vflq-5NiU.jpg"> </div> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.