使用HTML風格PHP簡碼=「」 CSS

我試圖使用PHP簡碼在高級定製領域

<?php the_field('charitynumber'); ?>

爲我們的客戶在1-100後端輸入一個數字。這將根據慈善機構的總體目標數量影響顯示/隱藏圖像的div的高度。我想設置它像

<div style="<?php the_field('charitynumber'); ?>"><img src="/img_here.jpg"></div>

但不能想到如何做到這一點或替代方法。

來源

2016-07-06 runningantelope123

您打算使用數據庫將總高度從？林不知道最終的結果是什麼，但有多種方式可以把它關閉... –

短場將不得不返回有效的CSS，然後，不只是一個數字。 'style =「100」'是錯誤的。它必須是'style =「height：100px」'或什麼的。 –

@MarcB不僅可以返回有效的CSS，還可以計算一個div的百分比高度。 –

您需要將shortcode放入有效的樣式屬性中。這意味着輸出樣式名稱並附加適當的單位。另外，如果the_field()返回一個字符串，則需要對其進行回顯。

<div style="height: <?php echo the_field('charitynumber'); ?>%;"><img src="/img_here.jpg"></div>

來源

2016-07-06 21:05:17 Barmar

完全按照我的需要工作，非常完美。謝謝 – runningantelope123

給這個一杆 - 你可以

<div class="progress"> 
    <div class="fillBar" style="height:calc(100% - <?php the_field('charitynumber'); ?>);"></div> 
    <img src="/img_here.jpg"> 
</div>

然後從那裏，你只需要風格吧。我下面的示例將進度條鎖定在底部，當您登錄頁面時，進度條會從頂部向下進行動畫，直到停止在當前的百分比。

.progress{ 
    position: relative; 
    width: 50px; 
    height: 200px; 
} 
.progress img{ 
    width: 50px; 
    height: 200px; 
    position: absolute; 
    z-index: 1; 
} 
.progress .fillBar{ 
    width: 50px; 
    bottom: 0; 
    height: 200px; 
    transition: height 0.3s ease-out; 
}

來源

2016-07-06 21:06:01 will

使用HTML風格PHP簡碼=「」 CSS

回答

相關問題