使用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

回答

相关问题