我有一個占視口寬度 88% 的圖像，因此它的高度是動態(tài)的。我需要將我的 .pricecontainermobile div 直接放置在圖像下方，這樣無論視口如何，它都會直接位于圖像下方...我嘗試通過位置：絕對/相對進行設置，但我無法讓它工作，因為我需要我的圖像垂直居中（負46px）...我相信這擾亂了絕對/相對...我哪里出錯了？注意這僅適用于縱向...請查看此方向的代碼以查看正確的樣式等。JSFiddle： https: //jsfiddle.net/cz9hebg7/1/代碼：<div id="placement"> <img src="images/" alt="."/> <div class="pricecontainermobile"> <h1>TEST</h1> <h2>$ 30.00</h2> </div> </div>.pricecontainermobile>h2 { text-align: center; font-size: 12px;}.pricecontainermobile>h1 { display: block; font-family: neue-haas-grotesk-text, sans-serif; color: white; font-weight: 500; font-style: normal; list-style: none; text-align: center; text-decoration: none; font-size: 13px; top: 0;}.pricecontainermobile { display: block; width: 100%; background: blue; position: absolute;}#placement { display: block; position: fixed; left: 0; right: 0; top: 0; bottom: 0; height: 100%; width: 88%; margin-left: 6%; background: red;}#placement img { width: 100%; height: auto; position: relative; top: calc(50% - 46px); transform: translateY(-50%); }
1 回答
MMTTMM
TA貢獻1869條經(jīng)驗 獲得超4個贊
如果 .pricecontainermobile 塊的高度是固定的，您可以將其與 img 一起放入容器中，然后將容器放置在 #placement 中，而不是 img 中。
所以我將h1和h2的高度固定為18px；如果你愿意的話你可以改變它。另請注意，我為 img 使用了占位符圖像。
.pricecontainermobile>h2 {
text-align: center;
font-size: 12px;
line-height: 24px; /* new: fix height */
margin: 0;
}
.pricecontainermobile>h1 {
font-family: 'neue-haas-grotesk-text', sans-serif;
color: white;
font-weight: 500;
font-style: normal;
list-style: none;
text-align: center;
text-decoration: none;
font-size: 13px;
line-height: 24px; /* new: fix height */
margin: 0;
}
.pricecontainermobile {
display: block;
width: 100%;
background: blue;
position: absolute;
padding: 6px 0; /* new: correct header's margins */
}
#placement {
display: block;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
height: 100%;
width: 88%;
margin-left: 6%;
background: red;
}
#placement .imgcontainer { /* new: moved from img */
position: relative;
top: calc(50% - 30px); /* corrected for height of header */
transform: translateY(-50%);
}
#placement img {
vertical-align:top;
width: 100%;
height: auto;
}
<div id="placement">
<div class="imgcontainer">
<img src="https://placehold.it/600x200" alt="." />
<div class="pricecontainermobile">
<h1>TEST</h1>
<h2>$ 30.00</h2>
</div>
</div>
</div>
- 1 回答
- 0 關(guān)注
- 138 瀏覽
添加回答
舉報
0/150
提交
取消