根据持续时间设置 div 宽度和填充

Posted 2023-05-08

【中文标题】根据持续时间设置 div 宽度和填充

【英文标题】：Set div width and padding based on time duration

【发布时间】：2014-05-05 15:05:59

【问题描述】：

我目前正在尝试弄清楚如何根据持续时间设置 DIV 的尺寸。我正在使用 div 来表示日历上的事件。并为我的活动提供从 - 到时间戳。我真的无法弄清楚最好的方法应该是什么。

让我举一个我正在尝试做的例子。

        <td style="position:relative;">
            <!-- Inspecting every event -->
                <?php foreach ($room['events'] as $event): ?>

                    <!-- generate event divs -->
                    <?php if(date('j', strtotime($event['e_from'])) == $x+1): ?>
                        <div    class="event"
                                style="
                                    width: 100px;
                                    margin-left: 30px;
                         ">
                             <!-- pupulate divs with content -->
                             blah blah blah

                        </div>
                    <?php endif; ?>

                <?php endforeach; ?>

            </td>

此代码有效。现在我需要根据持续时间替换宽度和填充。我可以使用$event['e_from'] 和$event['e_to'] 访问时间戳。字符串看起来像这样2014-03-05 06:28:00。

我想要根据事件中的时间设置填充。例如，如果它从午夜开始填充为 0，如果它从下午 1 点开始填充为 13px，等等。基本上每小时填充 1px。然后根据e_from和e_to之间的时间设置宽度，每小时也设置1px。我不是 100% 确定规模，但无论如何逻辑都是一样的..

我想我不能要求实际的解决方案，因此我将不胜感激有关如何处理此任务的任何提示或建议。感谢大家提前阅读您的回复。

【问题讨论】：

PHP中有可以比较时间的函数，这样就不用自己写函数了（毕竟比较时间不是比较数字）。你可以让它输出小时的整数差，之后它应该是一帆风顺的。祝你好运！编辑：这可能有助于***.com/a/6158762/706798

我应该如何让它每小时增加 1px？使用 for 循环？

我不确定我是否理解这个问题。将填充设置为结果（时间差表示为整数小时）不起作用吗？

是的，它会起作用的。我将使用它作为宽度。但我仍然必须设置 div 相对于表格单元格的起点。我想通过填充来做到这一点。所以我需要一些在e_from 中花费时间并基于它将填充设置为适当值的函数..

好的。然后，您需要遍历所有 e_from 值，并找到最小的值。然后该最小值将对应于您的 0px 填充，所有其他填充将根据与原始填充的差异计算

【参考方案1】：

你可以这样做：

$maxWidth = 200; // px
$eventStart = strtotime('2014-03-01 20:54:00');
$eventEnd   = strtotime('2014-03-01 22:31:59');
$eventLength = $eventEnd - $eventStart;
$maxLength = 86400;
$ratio = $eventLength / $maxLength;

$width = round($ratio * $maxWidth);

您可以将比例设置为从 0 到 $maxWidth。在这种情况下，宽度将为 13px。